Select - Options Width

Topic: Select - Options Width

coinsbee pro premium asked 2 weeks ago

Expected behavior

Options width adjusted with the content

Actual behavior

Options content is cutted. The options width is the same as the select. The problem is, if the options content is too large, it's just cutted. It should be adjusted if possible (check the screen width). Maybe as an option for the select.Or at least when using data-mdb-icon the text should end before the icon. Otherwise you don't see any icon or it is no longer exactly below the others, which then also looks unattractive.

Resources (screenshots, code snippets etc.)

Example1 Example2

mlazaru staff answered 2 weeks ago

Thank you for reporting this. Currently there is no such option to adjust width automatically.

For now the only way to fix it is to set width manually.

coinsbee pro premium answered 2 weeks ago

Can I set the with for the options manually? Or do I need to change the width of the complete select? If last, this is not possible.

mlazaru staff answered 2 weeks ago

What I meant was to set width of complete select. Example 2 in this snippet:

Changing width of options only is not really supported and may not be looking well, however check example 1 also.

coinsbee pro premium answered 2 weeks ago

Problem with this solution is not "not be looking well", it's that you can't change it only for a specific select. If I change the dropdown class, all select dropdowns have this width. And I can't change the width of the select in general, because the container of my select have only limited space. Making the select width larger will result into an ugly container.

Maybe you can provide a "option-auto-width" feature in the future. That's how other select plugins do this.

mlazaru staff commented 2 weeks ago

We will discuss in our team how to solve this problem.

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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.1.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No