Topic: How to make select option wider?
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)?
https://mdbootstrap.com/snippets/standard/it_santini/5343604
You need to add CSS that will change its position.
https://mdbootstrap.com/snippets/standard/kpienkowska/5354644
IT_Santini pro premium priority commented 2 years 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.
https://mdbootstrap.com/docs/standard/forms/select/#docsTabsAPI 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?
kpienkowska staff commented 2 years ago
That option does exist but you need to use some CSS anyway: https://mdbootstrap.com/snippets/standard/kpienkowska/5358661
IT_Santini pro premium priority commented 2 years ago
thank you for your answer
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. https://mdbootstrap.com/snippets/standard/kpienkowska/5347041
IT_Santini pro premium priority commented 2 years 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
https://mdbootstrap.com/snippets/standard/it_santini/5343604#html-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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