CODEWITHSUNDEEP
angularjshtmlcssmaterial-design-lite
JTFRage
JTFRage

Reputation: 397

Material Design Lite input floating label not working after page navigation

I currently building a mobile hybrid application using Material Design Lite but I've encountered a slight issue. When I'm adding input field elements to my pages, the floating text or even the placeholder does not work correctly.

I'm using $stateProvider and $urlRouterProvider in my application for page navigation. Inside my index.html I have <div ui-view></div> in which I inject my views when my states change using <a ui-sref="home">Home</a> for example.

The problem I'm having is that if insert the following code into index.html outside of the ui-view of course:

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>

The floating label works no problem. However, if I place the same code inside a view (external page that is later injected inside the ui-view element after page navigation occurs), the floating label does not work correctly. The label does not float up, and the text entered is unreadable.

There are no errors displayed in my console and I can't seem to figure out why it won't work. The JS files and CSS are loaded in correctly.

Hopefully someone can help me out with this.

Thanks everyone!

Upvotes: 1

Views: 2079

Answers (1)

user6307701
user6307701

Reputation:

You have to upgrade the elements using "componentHandler.upgradeElements()"

Upvotes: 1

Related Questions