Topic: Select: Option hidden by overflow. How to fix it?
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,
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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