styling to input is not applied when building a dynamic moda


Topic: styling to input is not applied when building a dynamic modal

Yiannis Kyriazidis asked 3 years ago

I am building a modal dynamically with a search input in the modal body. But the styling on the input isnt applied , eg the border of the input via the class="form-outline"

example https://mdbootstrap.com/snippets/standard/yiannis_kyriazidis/3343500#js-tab-view


Grzegorz Bujański staff answered 3 years ago

Dynamically added inputs must be initialized: https://mdbootstrap.com/docs/standard/forms/input-fields/#section-dynamic-input-initialization.

Add this code before opening the modal:

modalWrap.querySelector('.modal').addEventListener('show.mdb.modal', () => {
    document.querySelectorAll('.form-outline').forEach((formOutline) => {
      new mdb.Input(formOutline).init();
    });
  })

ok thanks. tried it and it worked


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: windows desktop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes