MDB-Select: Inline stying on list item spans causing text ov

Topic: MDB-Select: Inline stying on list item spans causing text overlap

arolloff free asked 5 years ago

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: screenshot with expected item height

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: screenshot with text overrun

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 markup Typescript code

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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 free commented 5 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 free commented 5 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.

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 5 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 free commented 5 years ago

Thank you, I appreciate it!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: 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: Yes
Provided link: Yes

arolloff

10Support score
3Questions 0Answers 1Snippets