Long label ends with ellipsis instead of breaking

web
mobile

Topic: Long label ends with ellipsis instead of breaking

itay pro asked 4 months ago

Expected behavior

Long labels should break to 2 lines instead of ending with an ellipsis as it was recently

Actual behavior

Label text is truncated

Not good: https://imgur.com/a/nNSm11z

Good: https://imgur.com/a/f6bRP8C

These CSS rules fix it but since the label is inside mdb-checkbox it cannot be implemented in the component's CSS file:

display: contents;
white-space: normal;

Please advise and avoid breaking changes in the future


Arkadiusz Idzikowski staff answered 4 months ago

It looks like a bug, we will take a closer look at that and fix it as soon as possible.

As a workaround for now please use this styles:

.md-form .form-check-label {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

itay pro commented 4 months ago

As stated, these CSS rules fix it but since the label is inside mdb-checkbox it cannot be implemented in the component's CSS file, and I don't want them global


Arkadiusz Idzikowski staff commented 4 months ago

You can always add custom class to the mdb-checkbox component and change selector to something like: .md-form .custom-class .form-check-label.

This way your styles will be scoped and only applied to some specific components.


itay pro answered 2 months ago

Fix in 9.0.1 and probably from 8.9.0


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.8.2
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags