floating labels are not initialized when html is loaded dynamically
See original GitHub issueThe floating labels such as these:
<input id="password_input" type="password" name="password" class="validate" >
<label class="active" for="password_input">Password</label>
Are not getting initialized and remain on the top (without floating in to the input field) without any styles applied, until I do a click within the field. (After user clicks input field, it becomes ok). This is fine and I am kind of expecting this problem as these html portions are getting loaded dynamically through angular template. So they were not there in the initial page load and missed the automatic initialization at page load. This is not an issue by itself, but my issue is that I don’t know what JavaScript method to call to get them initialized. It is not mentioned in the documentation. Can someone please mention the method such that I can call it pragmatically in my code after I load the template?
If I am to give an example of what kind of help I am looking for here, your documentation explains what to with dynamically generated ‘select’ controls and mentions the method that I should be calling to initialize them. I don’t have a problem with ‘select’ as I know what method to call. I am looking for a similar (see the screenshot below) method for materialize floating labels.
Issue Analytics
- State:
- Created 8 years ago
- Comments:11 (1 by maintainers)
@ancientdemon can you post the plunker link? my problem was the opposite of yours. It did not floating up when the ng-model was filled. It was required twice click to make the label floats up. I’ve checked the updateTextFields, at line
if ($(element).val().length > 0
, it shows that the val was empty. Here is my controller.js:The “$scope.data” and the “org” are objects.
$scope.orgDetail = function(org){ $scope.data = org; Materialize.updateTextFields(); $('#modal1').openModal(); };
And this is my html:
<div class="row"> <div class="input-field col s12 m12 l12"> <input id="name" type="text" class="validate" data-ng-model="data.name"> <label for="name">Organization Name</label> </div> </div>
Regards, Aria.
Added into docs in 17d59100c517ec324e186e8b207dc5815d34229b