Topic: How to make select option wider?

IT_Santini priority asked 1 year ago

I have a small select toggle, but I want selection options to fit all options text, how can I achieve this?

And also what if I want to have hidden select input but when I click a button then the options appear below the button after the selection has been made then the hidden input fill with the option value (select input remains hidden)?

Kamila Pieńkowska staff answered 1 year ago

You need to add CSS that will change its position.

IT_Santini priority commented 1 year ago

That is not the answer I was hoping for, but I think it really meant putting the select-dropdown-container inside another container set by the option. Because the documentation says "Container for the select dropdown. Accepts an element selector inside of which select dropdown will be rendered", what is the container options really do then?

Kamila Pieńkowska staff commented 1 year ago

That option does exist but you need to use some CSS anyway:

IT_Santini priority commented 1 year ago

thank you for your answer

Kamila Pieńkowska staff answered 1 year ago

If you want all options to fit you need to customize select dropdown via CSS variables or custom CSS and use it to hide form-outline.

IT_Santini priority commented 1 year ago

I've got another problem, the select dropdown is not rendered relative to the custom container set by the options. (as the documentation suggests)

The expected behavior should be pop near the custom container I've updated the snippet, please help. Thank you

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.3.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes