Topic: mdb-select-2
This is probably a question by a dummy, but I would like to know/understand how I can overrule a css setting for an object like mdb-select-2.
The default font size is 1rem, and want to configure the scss file of the form to set the font-size to 0.875rem for all mdb-select-2 object in the html file. This because the other inputs are in "-sm" style and I cannot find that class for the mdb-select-2 objects.
Can someone please explain me how to do this? Tried this, but doesn't work:
.mdb-select-value {
font-size: 0.875rem;
}
I put it in the component scss file. Tried after your question to pit in int the app-component.scss but than it doesn't work.
The approach is correct, you just need to use css selector with a higher specificity. Please take a look at our guide to learn more about styles customization: https://mdbootstrap.com/docs/angular/getting-started/styles-customization/
Add this styles to your global styles.scss file to overwrite styles in every mdb-select-2 component:
.mdb-select .mdb-select-value {
font-size: 0.875rem;
}
Or add custom class to the mdb-select component <mdb-select-2 class="custom-class"> to overwrite styles only of this specific instance:
.custom-class .mdb-select-value {
font-size: 0.875rem;
}
JeroenVunderink pro premium commented 4 years ago
Sorry, neither of the solutions work. Please advise...
The code is below:
HTML:
<div class="center">
<mdb-card>
<mdb-card-header class="unique-color-dark white-text text-center py-4">
<h5>
<strong>Edit</strong>
</h5>
</mdb-card-header>
<mdb-card-body class="px-lg-5 pt-0" *ngIf="dogFields">
<!--
Edit/Add Form
-->
<form class="text-center" style="color: #757575;" [formGroup]="Form" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col">
<!--
Breed field
-->
<div class="md-form" style="text-align: left;font-size: 0.875rem;">
<mdb-select-2 formControlName="breedid" class="form-control-sm" placeholder="Choose your breed" optionHeight="20" label="Breed">
<mdb-select-option *ngFor="let breed of breeds" [value]="breed.Id">{{ breed.Name_EN }}
</mdb-select-option>
</mdb-select-2>
</div>
</div>
SCSS File:
.mdb-select .mdb-select-value { font-size: 0.875rem; }
JeroenVunderink pro premium commented 4 years ago
This did the trick:
::ng-deep .mdb-select .mdb-select-value {
font-size: 0.875rem;
}
Arkadiusz Idzikowski staff commented 4 years ago
Did you add the .mdb-select .mdb-select-value rule to the global styles.scss file or to the component scss?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: MacAir
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No