21
Views
9
Comments
Solved
input with label in chrome problem works fine firefox

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.

Solution

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?

Hi Daan,

Could you please share the sample oml.


Regard's,

LK

Rank: #21303

i uploaded a sample oml

testsample.oml

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

Rank: #21303


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.

Solution

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?

Rank: #21303

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.

Rank: #129


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

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

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