Select options size


Topic: Select options size

web_ntx premium asked 3 years ago

Is it possible to resize the options in a select component? I'm using the size="sm" option which makes the input area smaller, but the options remain the regular size in the dropdown when I would like them to be smaller as well. Do I need to use text classes and the option-height option to resize them?


Michał Duszak staff answered 3 years ago

Yes, you can style options with select-option class.


web_ntx premium commented 3 years ago

I added a line of CSS which works: .select-option { font-size: 0.8rem; }

But the options should resize accordingly with the <select data-mdb-size="sm"> attribute. I hope this feature is added. The same is true for the search bar.


web_ntx premium answered 3 years ago

This snippet shows how to resize the options and search filter in a <select> component proportionately according to the data-mdb-size attribute.

It uses the <select> component's data-mdb-container attribute to apply CSS.

https://mdbootstrap.com/snippets/standard/web_ntx/3104358


Michał Duszak staff commented 3 years ago

Nice work you've done there!


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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.7.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No