Question

I’ve been struggling with this for hours.

I’ve stripped down my problem as much as possible. I have a div inside a form that has a left margin the same width of the form, and the form has overflow hidden (I want to hide the div). If I fire a focus on the first input of the form after load something strange happens. The div seems to center in the form (using the combined total of div width + div left margin). I have no idea why it moves at all? I can’t see any input properties apart from outline that change at all?

Live example here: http://jsfiddle.net/fQurc/12/ I’ve added a timeout so you can see what I mean.

I’d really appreciate any ideas? Thanks

Answer 1

This is due to the browser forcing the input field into view so that the user can see it. If you change the margin-left to 250px so that part of the field is visible, you will notice that the effect doesn’t happen.

Fiddle here: http://jsfiddle.net/fQurc/37/

If you need to use an input field that should not be visible; I would advise using:

<input type="hidden" />

I hope this helps!