Mdb-ui-kit: Floating-label bug when setting a value upon load

[SeBsZ]

I'm using some simple code to set the value of two textboxes from cookie upon loading of the page:

var nameField = document.getElementById("fullname");
var emailField = document.getElementById("email");

nameField.value = getCookie("full_name");
emailField.value = getCookie("user_email");

This is the HTML for the input box:
input class="form-control floating-label" id="email" type="email" placeholder="Your email"

For some reason, the floating label will overlay the value. Correct behavior would be for the floating label to move above the field.

[archon810]

Would love to get this resolved.

[FezVrasta]

Will look into it this week

[robstenbom]

I can't fix this as I'm at work but look at row 21 in material.js

Add a check for value

         if ($(this).hasClass("floating-label")) {
                var placeholder = $(this).attr("placeholder");
                $(this).attr("placeholder", null).removeClass("floating-label");
                $(this).after("<div class=floating-label>" + placeholder + "</div>");
            }

to

if ($(this).hasClass("floating-label")) {
    var empty = ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === ""));
    var placeholder = $(this).attr("placeholder");    
    $(this).attr("placeholder", null).removeClass("floating-label");

    if (empty)      
        $(this).after("<div class=floating-label>" + placeholder + "</div>");
    else 
        $(this).after("<div class=floating-label />");
}

Not sure if it will work as I can't test it, and it's quite ugly.

[FezVrasta]

The problem is that when you change the "placeholder" value, material.js does not update the floating-label div.

This problem will be fixed easily when we'll fix #105

We will be able to do:

$("#trg").attr("placeholder", "some new value").trigger("md:updateinput");

and it will trigger the material.js scripts needed to update the markup.

[SeBsZ]

I'm not sure if we're on the same page. My issue isn't about dynamically changing the placeholder. I'm simply pre-setting a value, and this does not move the floating label above the textfield , causing it to be overlaid - on top of the preset value.

[FezVrasta]

you are dinamically changing the value (you are using JS), and you are doing that after the material.js has ran.

edit: ops, got it.
Just trigger the "change" event on the input and it will update correctly.

[SeBsZ]

FezVrasta, I'm not sure how to trigger the change "element"? I tried using jQuery using
$("#id").change(); But that doesn't work.

How do you suggest I do this?

[FezVrasta]

$("#el").trigger("change")

[SeBsZ]

I did that too, but that also does not work. I'm triggering the change after updating the value. No javascript console errors. Still the placeholder text does not move above the field.

[FezVrasta]

It works, here a pen:

http://codepen.io/FezVrasta/pen/DjHqc (click on the text field to start the JS)

[SeBsZ]

Thank you, I managed to fix this. The problem was I had the trigger in the $(document).ready(function() { and that didn't work. I managed to place it in the on('shown.bs.modal') code which is run when my modal dialog appears. That fixed it.

Thanks a lot for your quick help in resolving this!!

[FezVrasta]

you're welcome