mdb-select-2

Topic: mdb-select-2

JeroenVunderink premium asked 4 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;
  }

Add comment

JeroenVunderink premium answered 4 years ago

1 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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

<p>Sorry, neither of the solutions work. Please advise...</p>

<p>The code is below:</p>

<mdb-card-body class="px-lg-5 pt-0" *ngIf="dogFields">

<form class="text-center" style="color: #757575;" [formGroup]="Form" (ngSubmit)="onSubmit()">

<div class="row">
          <div class="col">
            
            <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>
</code></pre>

<pre class="prettyprint"><code>.mdb-select .mdb-select-value {    font-size: 0.875rem;   }
</code></pre>

Please insert min. 15 characters.

JeroenVunderink 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?

Add comment

Write

Create snippet

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

JeroenVunderink

Premium support 233Support score
16Questions 14Answers 0Snippets