Select - Options Width


Topic: Select - Options Width

coinsbee pro premium asked 2 years 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 years 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 years 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 years ago

What I meant was to set width of complete select. Example 2 in this snippet: https://mdbootstrap.com/snippets/standard/mlazaru/4089240

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 years 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 years ago

We will discuss in our team how to solve this 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: 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