Problem with Animated Label if Prefilled

Manthan Shah

Rank: #599

Solved

Problem with Animated Label if Prefilled

Question

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.

on 2019-01-25

Raghuram kamath

Rank: #1125

Solution

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

See solution in context

on 2019-01-27

1 reply

on 2019-01-28

Show thread

Hide thread

Manthan Shah

Rank: #599

coder kamath wrote:

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

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

on 2019-01-28

Raghuram kamath

Rank: #1125

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);
});

on 2019-01-26

Manthan Shah

Rank: #599

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.

on 2019-01-27

1 reply

on 2019-01-27

Show thread

Hide thread

Raghuram kamath

Rank: #1125

Manthan Shah wrote:

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.

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

on 2019-01-27

Raghuram kamath

Rank: #1125

Solution

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

on 2019-01-27

1 reply

on 2019-01-28

Show thread

Hide thread

Manthan Shah

Rank: #599

coder kamath wrote:

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

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

on 2019-01-28

Raghuram kamath

Rank: #1125

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.