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