Topic: Label overlaps the border of the input if in collapsible component (bug or my mistake?)

Luisilva premium asked 2 years ago

The title says it all. Snippets bellow

Expected behavior

The input border and label don't label overlap each other

Actual behavior

The input border and label overlap in some cases.

Resources (screenshots, code snippets etc.)

If the labels are diferent it needs at least 3 inputs and labels for one of them to overlap:

But if the labels are the same every label and input overlap

I tried to copy paste the code examples as much as i could so i wouldn't make a mistake.

If outside the collapsible component everything works correctly!!

Dawid Wajszczuk staff answered 2 years ago


Try using this JS code

document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();

You need to update labels of this inputs (as they were hidden). More information about this can be found here I have also created 2 snippets with possible solutions for your issues:


Keep coding,

Luisilva premium commented 2 years ago

Not only was your answer perfect i also ended up having to upgrade to the newest mdb5 version 3.9, since i was only using version 3.3, but everything is working as expected. Thanks ;-)

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: Yes