I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly.
In my application, I am utilizing $stateProvider and $urlRouterProvider for page navigation. Within my index.html file, I have a
where I inject my views when the states change using Home, for example.The issue arises when I insert the following code into index.html outside of the ui-view:
<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 perfectly fine in this case. However, if I place the same code inside a view (an external page that is later injected inside the ui-view element after page navigation), the floating label does not work correctly. The label does not float up, and the entered text is unreadable.
I have checked my console for errors, but nothing is being displayed, and I can't seem to pinpoint why it isn't functioning as expected. All JS files and CSS are loaded correctly.
I would greatly appreciate any assistance with this matter.
Thank you all for your help!