Long label ends with ellipsis instead of breaking


Topic: Long label ends with ellipsis instead of breaking

itay pro asked 5 years 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 5 years 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 5 years 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 5 years 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 5 years ago

Fix in 9.0.1 and probably from 8.9.0


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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