Topic: Select - Options Width

coinsbee 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


coinsbee 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.


Mateusz Lazaru staff commented 2 years ago

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


Mateusz Lazaru 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 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.


Mateusz Lazaru 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.



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

  • ForumUser: Premium
  • 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