When tabbing through input fields, fixed bar at bottom displays on top of a field I tab in to

I basically have this list of input fields and I jump through them using tab and fill them in one by one. On the bottom of the screen I have a fixed div with contains some chat functionality.

The problem is that when I tab through the fields and come to the bottom of the page the field that I tab in to might be positioned below the fixed chat bar. This causes the input field to be selected but I can not see it because it's behind the chat bar.

I hope this makes sense to you, I've attached a screencast of the problem. You see me tabbing through the fields and when I'm at the bottom the开发者_StackOverflow中文版 focussed field is behind the chat bar.

http://www.screencast.com/users/roman776/folders/Jing/media/350949d3-f709-45bf-97b8-438291665088

Is there a CSS property I could apply to the fixed bottom bar to make sure it moves the page down when I'm focussing something that's underneath it?

Many thanks in advance.

You could use a neat little jQuery plugin called 'jQuery.ScrollTo'. I have coded up an example for you here Basically everytime and input gets focus, it scrolls the page 10px:

$("input").each(function(){
    $(this).focus(function(){$.scrollTo('+=10px');});
}); 

Theres loads of options, check them out here

Have fun!

UPDATE: Added padding to the last element to ensure it is shown

In my opinion, what you're describing is natural behaviour for a browser. Are there any buttons below the last text area that you are showing on the screencast? If yes, then something's wrong, as the container's (of the form that is) bottom should be completely in view.

For an inelegant, quick fix, add padding to your form container's bottom that is as heigh as the fixed <div> footer is, i.e. padding-bottom = footer <div> height.