materialize icon indicating copy to clipboard operation
materialize copied to clipboard

BUG: Labels animate floating after page render

Open redbmk opened this issue 9 years ago • 8 comments

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)

redbmk avatar Jun 13 '16 20:06 redbmk

Did you try adding class="active" to the label?

thiagogsr avatar Jun 14 '16 02:06 thiagogsr

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.

kmmbvnr avatar Jun 14 '16 05:06 kmmbvnr

Yeah class="active" works but this change makes it unnecessary and prevents having to initialize the page on DOM ready as it currently does.

redbmk avatar Jun 14 '16 09:06 redbmk

This PR looks really messy. Would you mind to clean it up or create a new one?

tomscholz avatar Jun 11 '17 08:06 tomscholz

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

redbmk avatar Jun 11 '17 19:06 redbmk

Is this issue still present? Can anyone please check?

tomscholz avatar Jul 23 '17 19:07 tomscholz

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.

redbmk avatar Jul 24 '17 01:07 redbmk

in materialize.js file in line 6919, just change to (index, element) { order and updateTextFields() , work fine

tofesu avatar Apr 27 '23 12:04 tofesu