JeroenVunderink premium asked 3 years ago


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;
  }

JeroenVunderink premium answered 3 years ago


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.


Arkadiusz Idzikowski staff answered 3 years ago


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 premium commented 3 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 premium commented 3 years ago

This did the trick:

::ng-deep .mdb-select .mdb-select-value {
    font-size: 0.875rem;
  }

Arkadiusz Idzikowski staff commented 3 years ago

Did you add the .mdb-select .mdb-select-value rule to the global styles.scss file or to the component scss?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: MacAir
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No