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


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

gdw96 asked 3 years 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 3 years ago

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


gdw96 commented 3 years 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 3 years 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 3 years 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 3 years ago

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


gdw96 commented 3 years 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