Topic: Dropdown text length

Chris Sweeney premium asked 5 years ago


I'm sure I saw this in an earlier version, but I can't find the answer now.

How do I get long dropdown item text to wrap round onto another line? Currently, the text is truncated.

Many thanks

Chris

PS - I'm using 4.7 but this doesn't appear in the version list on this form.


Chris Sweeney premium answered 5 years ago


I've created a page which shows the 2 issues:

1) long dropdown lists don't display in full (you can't scroll to the bottom of the list)

2) long titles in the dropdown list don't display in full - ideally they would wrap round to the next line. This happens on desktop, but is obviously worse on a phone

demo page

Cheers Chris


MDBootstrap staff commented 5 years ago

We have this feature in our to do list. Right now, We don't have ready feature to work with such long dropdowns. We will add it in the future.


Chris Sweeney premium commented 5 years ago

Thanks Piotr.
Chris


Chris Sweeney premium answered 5 years ago


Hi Piotr

Sorry - I don't know what i'm doing - I started replying, changed my mind and have now deleted the answer - which included my previous code and your response:

"My college asked if you can make snippet with an example of behaviour you want to change in our component. I will take care of your case just need some more information. Copy code from the body to HTML field, styling to CSS and all scripts you are using before closing body tags to JS field."

Cheers

Chris


Jakub Strebeyko staff answered 5 years ago


Hi there @Chris,

Could you perhaps share some code? I see what you mean - regular overflow-wrap and word-wrap properties are not being properly implemented onto the anchor's element textnode child. I feel the problem now might have to do with dropdown's nested nature, but in my case the dropdown-menu get horizontally stretched rather than truncate.

Are you generating your dropdown menu dynamically? I know it might sound silly, but if not, hot fix could be to append a <br/> in place of your choosing.

With Best Regards, Kuba



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 jQuery
  • MDB Version: 4.6.1
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No