Topic: MDB-Select: Inline stying on list item spans causing text overlap
Hello. I have an Angular 7 modal component that uses a filter-enabled mdb-select control to display the top N values in a database field. I am handling the ngNoOptionsFound event to re-query the database using the user entered filter string and update the [options] binding with the matching results (if any).
When the new dataset is first assigned to the control, any items with long labels wrap onto multiple lines and the item heights are sufficient to ensure they are readable; note the [notFoundMsg] is still visible as well:
https://drive.google.com/open?id=1wQPtS6bB0hQyXW3rm-fEWkcGvp2QO9ig
If I close and re-open the dropdown, the "Select All" option appears, the [notFoundMsg] disapppears and the item heights are not adjusted to handle the word wrapping - which results in item labels overruning the item(s) below:
https://drive.google.com/open?id=11P16aTWFR4W7zvRgvQvYHzFPA5Mbw_rF
This is caused by inline stying on the <span> within each list item setting the height & line-height to 37px:
<span class="deselect-option ng-tns-c6-5 ng-star-inserted" style="height: 37px;line-height: 37px;"><input class="form-check-input " type="checkbox"><label class="ng-tns-c6-5"></label> Lorem ipsum dolor sit amet, consectetur adipiscing elit #0 </span>
Is there a setting/configuration option to disable these inline styles, so the option items always maintain adequate height for their labels?
Sample code:Template markupTypescript code
Hello,
Thank you for all the information, we will take a closer look at those problems. Could you fix links to the screenshots?
Please try to upgrade your version to 7.4.1. We added some styles to the options to resolve problems with long labels.
arolloff commented 6 years ago
I've added block quotes with the verified screenshot URLs. They reside in a Google Drive folder, so the shareable links do not follow the typical image url format.
arolloff commented 6 years ago
The upgrade to 7.4.1 has helped to some degree; the item text no longer wraps, so they do not overrun the item(s) below - however the resulting truncation of the label prevents the full text from being visible. As such, when the select list includes multiple items with similar labels longer than the control's width, the user cannot differentiate those items from one another.
Would it be possible to add an option to force the full label text to always be visible, and set the span line-height to prevent overlap?
FYI: with v7.4.0, I was overriding the inline styling and setting the mdb-select li > span's 'line-height: inherit !important;', which provided a servicable workaround. The same styling is of some help with v7.4.1, but labels spanning more than 2 lines are being truncated.
Arkadiusz Idzikowski staff commented 6 years ago
Currently there is only [optionHeight] input which allow to set fixed height for the option element. We will think about better solution for this problem.
arolloff commented 6 years ago
Thank you, I appreciate it!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.0
- Device: Windows Laptop
- Browser: Chrome, Firefox, Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes