Question

Take a look at this page.

I have a page with a lower ‘floating’ fixed-position div that’s covering some portion of the screen bottom of the screen, with a high z-index, and a bunch of input boxes.

The problem is that when one of the lower input boxes are focused, by pressing TAB, their content is partly hidden by the div. I would like to detect when lower input boxes are focused, and scroll the page down “just enough” to bring them to a visible spot.

Is there a clean way to do this?

Edit: my solution seems to work except for browser zoom. Try it at zoom 144% for example. Any ideas on how to fix?

Answer 1

Here is a solution by a friend of mine.

Seems to work well across browsers.

There still is one minor annoyance that the element has a larger border when selected, and part of that enlarged bordered remains hidden. I could always just add an extra pixel or two to the scroll, but I’m sure there must be a more elegant solution.