Inputs with floating labels aren't initialized properly


Topic: Inputs with floating labels aren't initialized properly when placed inside collapsed accordions

UNNdev pro premium priority asked 3 years ago

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.


Michał Duszak staff answered 3 years ago

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

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.7.1
  • Device: All devices
  • Browser: All browsers
  • OS: All operating systems
  • Provided sample code: No
  • Provided link: No