Problem with Animated Label if Prefilled

Hi,

I am facing the following problem in Animated Label of OutSystemsUIWeb. Please look at the screenshots below:

1) If a user has saved the password in the google chrome I see the following output from Animated Label

2) So the behavior of the animated label should be like the following screen shot:

Please help me solve the problem.

Regards,

Manthan Shah.

I noticed that the Animation Logic is running before the Chrome is filling the password in the form.

I believe this is a bug from the outsystem, you might have to try contact outsystem support to fix this for everyone.

But for now you can Add a temporary fix by adding this script to yo Login page's Java script 

SyntaxEditor Code Snippet

$(document).ready(function () {
    setTimeout(function(){
        $(".animated-label").addClass('active');
    }, 200);
});

Ok I have contacted outsystems support. I did try your script but found the following problem:

The User Name and Password Label remains to the top of input box on the first load if there is not auto complete on the fields.

Regards,

Manthan Shah.

Manthan Shah wrote:

I know this would happen,  I just thought you can add the rest of logic :). 

Okay, wait I will give you an update script in few minutes

Try this

SyntaxEditor Code Snippet

$(document).ready(function () {
    setTimeout(function(){
        $(".animated-label").each(function() {
    var isAutoFilled = $(this).children().find("input").is(":-webkit-autofill")
    if(isAutoFilled)
    {
        $(this).addClass('active');
    }
    else{
        $(this).removeClass('active');
    }
});
    }, 200);
});

Please Note : This is a temporary Fix I guess the Outsystems Team will release the Full fix soon.

This is Tested on Chrome only. Please feel free to test in other browsers and tweak according to your needs.

Let me know if this worked

coder kamath wrote:

$(document).ready(function () {
    setTimeout(function(){
        $(".animated-label").each(function() {
    var isAutoFilled = $(this).children().find("input").is(":-webkit-autofill")
    if(isAutoFilled)
    {
        $(this).addClass('active');
    }
    else{
        $(this).removeClass('active');
    }
});
    }, 200);
});

I did try this but still not working in chrome. Please look at the screenshot below:

Tested this, works fine for me.

Please try opening  the unfilled screen in a new session or incognito window. 

I doubt it might be some cache issue. 

As you can see in second screen its slightly down. I have to click on text field to make it animate Upwards

I would Suggest you going into Debugging mode in chrome (F12 or Ctrl+Shift+I)and trying to Apply break point in Login Page. and please share a screen shot of this page.

I am not sure why it is not working for you, Can you test this in a different machine  once.

Hi,

Yes the solution works well as it was cached I cleared the cached and started working thanks.

Regards,

Manthan Shah.