Adding css class to mdb-select


Topic: Adding css class to mdb-select

Billy White asked 5 years ago

Expected behavior

I want to add the .custom-select class I have from the Admin Dashboard Free template to the mdb-select tag. Should look like the following image: enter image description here

Actual behavior

However, when I add class="custom-select" it just overlays the css and displays like this following image: enter image description here

Now I know mdb-select has the [outline]="true" property, but this does not make my selects uniform with the rest of my fields on the UI.

Is there a way I can customize the mdb-select css?

P.S. I do have the PRO version just not linked to this account.

Thanks, Billy


Konrad Stępień staff answered 5 years ago

Hi @Billy White,

You should use customClass property like this:

<mdb-select [outline]="true" [options]="optionsSelect" label="Choose your option" customClass="my-custom-class"></mdb-select>

Then everything works correctly.

And if you want to add custom styles for this class, you have to add styles for global file styles.scss. Tell me if you still have problems.

Best, Konrad.


Claudia Di Bitonto commented 4 years ago

Hello! I have a problem with mdbootstrap, although I have the pro version, the css custom class only works for the external object .. but not for nested objects.

how can I change the css of nested objects? Obviously without overwriting it with host and ng-deep because then it changes throughout the project

Thanks


Arkadiusz Idzikowski staff commented 4 years ago

Can you provide some example code and more details about the problem?


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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.0.1
  • Device: Web
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No