Select: Option hidden by overflow. How to fix it?


Topic: Select: Option hidden by overflow. How to fix it?

gdw96 asked 11 months ago

Hello,

I have a select that allows the user to select one or more movies.

The problem is that the movie titles are sometimes too long for the size of the select and only a part of the title is visible (overflow). In short, a hidden movie is sometimes blocking the user.

I just need an idea to solve this problem. I thought of displaying the whole title when the mouse cursor hovers over it, but on a touch screen it won't work.

Anyway, I'm not sure how to do this for now. Do you have an idea?

I thank you in advance,


Dawid Wajszczuk staff commented 11 months ago

Hi. Can you please provide a snippet with this issue? It will help a lot. Thanks. https://mdbootstrap.com/snippets/


gdw96 commented 11 months ago

@Dawid Wajszczuk Thank you for your answer. Here is a snippet simulating my problem: https://mdbootstrap.com/snippets/standard/gdw96/3163154


Dawid Wajszczuk staff answered 11 months ago

Hi,

You can try adding this to your CSS

.select-option-text {
   overflow: hidden;
   overflow-wrap: break-word;
   width: 100%;
   display: inline-block;
   white-space: pre-line;
}

and then add data-mdb-option-height="100" to your Select element.

Keep coding,
Dawid


gdw96 commented 11 months ago

@Dawid Wajszczuk Cool, it works. Thanks a lot ! :-)

But now I have a problem differentiating the selects I want this behavior with and the others.


Dawid Wajszczuk staff commented 11 months ago

Unfortunately, it is not possible to apply this text options to specific Selects due to how the options are rendered.


gdw96 commented 11 months ago

@Dawid Wajszczuk Thank you very much for your answer.


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: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.7.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No