Unable to override primary color or use mdb variable in cust

Topic: Unable to override primary color or use mdb variable in custom scss and Input validation text overlap

akademe pro asked 6 years ago

Hi Team We have 2 issues 1) Unable to override primary color, I created new custom scss folder in src folder which has custom scss file, now I declared primary color variable to override but its not working, also I'm unable to call mdb variables in that custom scss folder, it throws error. we can override mdb variable only if we declare in custom scss which is there in ui-kit folder inside node modules, which is not a proper solution and also gets removed if npm update is done. 2) Input Validation shows red color error message but when input is valid then it shows green color message which is overlapping on red message, red message is not disappearing.

Damian Gemza staff commented 6 years ago

Dear akademe, Please check my below code. I have added it in the global styles.scss stylesheet and for me it's okay. $primary-color: red; @import "~ng-uikit-pro-standard/assets/scss/mdb"; It may be necessary to copy the img and font directories from ng-uikit-pro-standard/assets to one above styles.scss, because the compiler may throw you an errors that he can't find any images and fonts. About Input Validation: Could you please provide me with the code which you're using? Best Regards, Damian

akademe pro commented 6 years ago

Hi Damian, Thanks for getting back, I tried your above method, I copy pasted the images and fonts in global folder and pasted your code, but still throws image error, it became hard to call and modify variables from node modules ui-kit inside custom scss, can you provide solution for this, and about input validation problem, the code which I used was the same as given in document

Damian Gemza staff commented 6 years ago

Dear akademe, You have to copy the img and font folders to one level above than stylesheet in which you're importing ng-uikit/assets/scss/mdb file. So if you're importing mdb.scss file in src/styles.scss file, you have to copy the img and fonts folders into the root directory of your project. Also please provide me with the code of the input which causes you a validation problem. I tried to copy both forms and inputs code but for me everything is okay. Best Regards, Damian

akademe pro commented 6 years ago

Hi Damian, Thanks for quick response and clear steps for overriding primary color, now its working fine, in future when we update mdb, we have to manually replace those 2 folder right? and about input validation, here is our code import { FormGroup, Validators, FormBuilder } from '@angular/forms'; import { Component, OnInit } from '@angular/core'; In TS FIle @Component({ selector: 'app-manage', templateUrl: './manage.component.html', styleUrls: ['./manage.component.scss'] }) export class ManageComponent implements OnInit { akmail: FormGroup; constructor(private fb: FormBuilder) { this.akmail = fb.group({ 'email': [null, Validators.email], }); } ngOnInit() { } } In HTML max value validator Also the input validation acting weird in different pages, in 1 page success and failure msgs overlap I inspected its due to important in red text scss, and in 1 page on clicking input it shows green valid text without input, and in some page it is working fine.

Hi Damian,

Thanks for quick response and clear steps for overriding primary color, now its working fine, in future when we update mdb, we have to manually replace those 2 folder right? and about input validation, here is our code

import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

In TS FIle

@Component({
  selector: 'app-manage',
  templateUrl: './manage.component.html',
  styleUrls: ['./manage.component.scss']
})
export class ManageComponent implements OnInit {

akmail: FormGroup;
    constructor(private fb: FormBuilder) {
    this.akmail = fb.group({
        'email': [null, Validators.email],
        });
    }

ngOnInit() {
  }

}

In HTML

max value validator

Also the input validation acting weird in different pages, in 1 page success and failure msgs overlap I inspected its due to important in red text scss, and in 1 page on clicking input it shows green valid text without input, and in some page it is working fine.

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Dear akademe, No, you don't have to update the img and font folders all the time. Their content is not changed with the updates. About input problem - still, I can't replicate your issue. Could you please provide me with the reproduction repository on which I'll be able to debug your problem? Send me a link at d.gemza@mdbootstrap.com Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

akademe

Pro User 35Support score
8Questions 1Answers 0Snippets