question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

floating labels are not initialized when html is loaded dynamically

See original GitHub issue

The 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.

image

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ariaenggarcommented, Apr 29, 2016

@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.

0reactions
acburstcommented, Apr 24, 2016

Added into docs in 17d59100c517ec324e186e8b207dc5815d34229b

Read more comments on GitHub >

github_iconTop Results From Across the Web

floating label dropdown not working - Stack Overflow
Im creating a floating label , i manage to make a floating label on textbox ... className = 'dynamic-dropdown'; input.id = id; if...
Read more >
label floating not working with value dynamically - MDBootstrap
Hi, i'm trying to use input text with label floating. When I put the mouse, it works. But if I set value with...
Read more >
How to build a floating label input field - ITNEXT
Let's take a look at building a floating label for input fields using css animations and es6.
Read more >
JavaScript · Bootstrap
Bootstrap does not officially support third-party JavaScript libraries ... In practice, this is used to enable dynamic HTML content to have tooltips added....
Read more >
Dynamic behavior in Svelte: working with variables and props
Prerequisites: At minimum, it is recommended that you are familiar with the core HTML, CSS, and JavaScript languages, and have knowledge of the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found