Mdbootstrap V5 input borders don’t appear when used in AngularJS pages (other than layout)

Tags: , , ,



I’m trying to redesign some of the forms in an AngularJS application using mdbootstrap version 5. I’ve encountered a problem with inputs. The inputs that are inside pages of the dashboard (the app is a dashboard) don’t get borders, whereas inputs that are on the main page or layout do. I added the mdb.js file in my layout and it works fine. My assumption is that event listeners are registered before the elements are rendered so if that’s correct I’m wondering if there is a way to re-register event listeners or recalculate styles somehow after the input elements are rendered. here are how my inputs loaded

Answer

According to what you described, I found this in mdbootstrap’s own docs:

If the input is dynamically loaded on the page, then after displaying it, the initialization should be performed as in the example below.

document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).init();
});

source: https://mdbootstrap.com/docs/standard/forms/input-fields/



Source: stackoverflow