Topic: Long label ends with ellipsis instead of breaking
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
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 a year 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 a year 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.
Resolved
- 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