Topic: Inputs with floating labels aren't initialized properly when placed inside collapsed accordions
Expected behavior
Input elements placed inside collapsed accordions should be initialized properly on page load. Since it's not an uncommon use-case, the framework should handle this situation out-of-the-box.
Actual behavior
The width of the floating label is miscalculated when inside a collapsed accordion. Probably because accordions use display: none to hide content.
Hello, if your elements are dynamically shown/hidden/rendered, I recommend updating labels upon showing them. I have made a snippet for you:https://mdbootstrap.com/snippets/standard/m-duszak/3129267#js-tab-view
If your project is disposing components, use this JS instead in order to re-init:
document.addEventListener('shown.bs.collapse', () => {
document.querySelectorAll('.form-outline').forEach((formOutline) => {
new mdb.Input(formOutline).update();
});
})
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.7.1
- Device: All devices
- Browser: All browsers
- OS: All operating systems
- Provided sample code: No
- Provided link: No