Form with initial values within closed accordion renders not


Topic: Form with initial values within closed accordion renders notches incorrectly

iamjonmiller pro asked 4 years ago

Expected behavior: A form within a closed accordion that has initial values will open and appear exactly like a form outside an accordion.

Actual behavior: The dynamic form-outline created by the notch element does not match the dimensions of the label and overlaps it. This corrects once the input has been interacted with. It clearly is not redrawing once an accordion has been toggled.

Resources (screenshots, code snippets etc.): Example form within an example accordion. Open accordion renders form correctly. Closed does not. https://mdbootstrap.com/snippets/standard/iamjonmiller/3092851


Michał Duszak staff answered 4 years ago

Hello, use update method on inputs upon openning accordion:

window.addEventListener('shown.bs.collapse', () => {
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();
});
})

https://mdbootstrap.com/snippets/standard/m-duszak/3098449#js-tab-view


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: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags