Problem with long labels


Topic: Problem with long labels

UNNdev pro premium priority asked 4 years ago

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


Grzegorz Bujański staff answered 4 years ago

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}) }


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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