Topic: Label overlaps the border of the input if in collapsible component (bug or my mistake?)
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!!
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:
- https://mdbootstrap.com/snippets/standard/d-wajszczuk/3274952#js-tab-view
- 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 ;-)
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: MDB5 3.9.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes