BUG: Labels animate floating after page render
When inputs are pre-filled, the label starts out overlapping the text, and animates to the floating position after the DOM is loaded. This fixes that for inputs and selects, but not for textareas (those still need some initialization). This also means less initialization required on page load.
Also, a context can now be added to Materialize.updateTextFields,
(e.g. Materialize.updateTextFields("#my-container")) so that
the entire page does not need to be reinitialized. A new public
function is exposed as well - Materialize.updateTextField - to
allow allow users to update a single input element (which could
could be useful for frameworks like React, Angular, Aurelia, etc)
Did you try adding class="active" to the label?
It would be nice not to have to add class="active" to labels explicitly.
Because of this, I have to redefine a lot of js in django admin, when tried to make them work with materialize.
Yeah class="active" works but this change makes it unnecessary and prevents having to initialize the page on DOM ready as it currently does.
This PR looks really messy. Would you mind to clean it up or create a new one?
@tomscholz I went ahead and made a few minor improvements and cleaned up the commit. I just kept it in this PR to keep things simple.
Is this issue still present? Can anyone please check?
I just checked and it's still present. You can see the bug by going to http://materializecss.com/forms.html
You can see the animation every time you refresh the page - First Name and Placeholder overlap each other on page load, and so do Disabled and I am not editable.
If you pull in this branch and compile the code, then you can view the same page by running http-server and then going to http://127.0.0.1:8080/forms.html. You should see that the issue is gone, and there are some more fields to help test a couple other scenarios.
I updated the code to fix the conflicts and I did a little more cleanup so the code diffs are a bit cleaner.
in materialize.js file in line 6919,
just change to (index, element) { order and updateTextFields() , work fine