4

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

Hanieh MA
  • 43
  • 5

1 Answers1

2

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/

Geekmard
  • 166
  • 1
  • 3
  • 10
  • I have similar issues, I tried the js code above, it works but only when I reload the page. If I move from one route to another for example /register to login, the border disappears then I have to hard reload the page to get it. Is this the normal behavior? – Bruce Jul 25 '21 at 14:07