3

When using MDL (material-design-lite) my textfields aren't working, if i create them using JS after the page is already fully loaded.

So for example:

$('.container').append('<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-layout--padding-bottom-0">' +
        '<input class="mdl-textfield__input" type="text" id="#ssid" name="ssid" required>' + 
        '<label class="mdl-textfield__label" for="ssid">SSID</label>' + 
    '</div>');

After the textfield code has been appended to the container, everything looks fine. But clicking the textfield won't float the label, the normal glow around the textfield will be displayed.

Hope you understand where I'm going with this.

Robin Ostwald
  • 33
  • 5

1 Answers1

1

There are two issues here.

First off when you add elements in code - you need to get the MDL library to update your the Dom by making a call to upgradeDom

componentHandler.upgradeDom(gridHolder);

If that does not work I have found that using javascript to generate the dynamic elements does update the DOM and it all seems to work, where using JQuery has not.

Please see Google MDL - Creating card in jquery shows only text - no background or border where I had a similar problem and it includes JavaScript code to generate elements.

Community
  • 1
  • 1
Paul S Chapman
  • 832
  • 10
  • 37