Label overlaps the border of the input if in collapsible com


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

Luisilva pro premium asked 3 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:

https://mdbootstrap.com/snippets/standard/luisilva/3252166

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

https://mdbootstrap.com/snippets/standard/luisilva/3273823

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 3 years ago

Hi,

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 https://mdbootstrap.com/docs/standard/forms/input-fields/#section-update. I have also created 2 snippets with possible solutions for your issues:

  1. https://mdbootstrap.com/snippets/standard/d-wajszczuk/3274952#js-tab-view
  2. https://mdbootstrap.com/snippets/standard/d-wajszczuk/3274955#js-tab-view

Keep coding,
Dawid


Luisilva pro premium commented 3 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.

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: MDB5 3.9.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: Yes
Tags