Daan v
Rank: #21303
21Views
9Comments
Solved
input with label in chrome problem works fine firefox
Question
OutSystems 11

Hi,


I have this issue in chrome which looks like the following:

Anytime you load the page and you press edit to edit address details chrome triggers a focus or something which causes the input label to  move up. This needs to happen when the user focus on an input ( in Firefox this works perfectly ).

Now this is how it looks in Firefox and how it's supposed to look like:


I hope anyone can provide a fix, thank you in advance for any help.

0
0
on 2020-12-16
Copy link to comment
Lakshmi Kumar Yadav
Rank: #451
Solution

Replying to Daan v's comment on 17 Dec 2020 13:18:11

Daan, have you tried opening the url on both browser which i have shared, as it is working for me.

Is your chrome browser updated to latest version?

See solution in context
0
0
on 2020-12-17
Copy link to comment

Hi Daan,

Could you please share the sample oml.


Regard's,

LK

0
0
on 2020-12-16
Copy link to comment
Daan v
Rank: #21303

i uploaded a sample oml

testsample.oml

0
0
on 2020-12-17
Copy link to comment

Replying to Daan v's comment on 17 Dec 2020 11:07:01

Hi Daan,

Basically you have used "Interaction/AnimatedLabel" due to which the label was moving upside when user clicks on input box.

 


I have tried to reproduce the same scenario, pls check on below url:

https://lkyadav.outsystemscloud.com/testsample/OrderDetails?_ts=637438218760195715


I have just update the sample oml (attached) for "billing details" and same approach can be used for "shipping details" also.

Hope this helps you !!


Regards,

LK

testsamplev1.oml

0
0
on 2020-12-17
Copy link to comment
Daan v
Rank: #21303

Replying to Lakshmi Kumar Yadav's comment on 17 Dec 2020 11:56:29


I was using "Interaction/AnimatedLabel" on purpose. The label is supposed to move up when the user clicks an input. My problem is when the user is in the browser Google Chrome the label has moved up without clicking( 2nd picture ). In firefox the label stays within the input and moves up when the user clicks in the input.

0
0
on 2020-12-17
Copy link to comment
Lakshmi Kumar Yadav
Rank: #451
Solution

Replying to Daan v's comment on 17 Dec 2020 13:18:11

Daan, have you tried opening the url on both browser which i have shared, as it is working for me.

Is your chrome browser updated to latest version?

0
0
on 2020-12-17
Copy link to comment
Daan v
Rank: #21303

Replying to Lakshmi Kumar Yadav's comment on 17 Dec 2020 13:32:52

Open the testsample in Google Chrome.

You can see that the label is  above the input as soon as you click edit. this is not supposed to happen.

Open testsample in firefox.

You can see that the label is inside the input as soon as you click edit, this is correct.

My problem is with chrome moving the label text up.

0
0
on 2020-12-17
Copy link to comment
Dorine Boudry
Rank: #129

Replying to Daan v's comment on 17 Dec 2020 14:09:19


Daan,

I'm with Lakshmi, I don't see the same problems that you see, so maybe you have an outdated version of Chrome ?

this is how your screen looks in my chrome 

after choosing edit :

and after tabbing to first field

Both, as expected


Dorine

0
0
on 2020-12-17
Copy link to comment
Rahul Sahu
Rank: #88

Hi Daan,

 Some css are written  browser wise.

see below document

https://www.w3schools.com/cssref/css3_browsersupport.asp

check css which you are using for label and add browser wise .


Regards

Rahul

0
0
on 2020-12-16
Copy link to comment
Daan v
Rank: #21303

Hi,

I have an update. Looks like chrome needed to update after all. My chrome was not notifying me that it needed to update but after reinstalling everything worked perfect. Sorry for the inconvenience!!

Thank you for al the help!

Regards,

Daan

0
0
on 2020-12-18
Copy link to comment