Topic: Problem with long labels
Expected behavior MDB should handle label truncation on its own. Also, input+button groups should not wrap by default.
Actual behavior Labels wrap and look ugly. When focusing the input, the small label that moves to the top continues to look ugly. Also, the buttons of input+button groups can wrap if there is not enough space.
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/kayem79/2872168 or https://codepen.io/smares/pen/PobbWpR
Thanks for reporting this issue. We'll fix it. As a workaround use solution from this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2878014
UNNdev pro premium priority commented 4 years ago
Thanks, did something similar to that, except that for the width I used the $form-label-left variable and took that twice so it's symmetrical. So basically:
.form-outline .form-control ~ .form-label {
max-width: calc(100% - #{$form-label-left * 2})
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes