CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-position
AbuMariam
AbuMariam

Reputation: 3678

Fixed Position Div prevents scrolling when focus moves betwen its elements

I have two text boxes inside of a div that needs to have its position fixed. Problem is when I am on the first text box and if I tab to the second one, the page does not scroll down to the second because of the fixed position attribute of the div. Is there any way I can keep the fixed position of the div but still scroll down to the element which has focus?

<div style="width:100%;height:100%;position:fixed;">
<input id="FirstName"> Lots of padding goes here
<input id="LastName">
 </div>

For the full code please see my fiddle https://jsfiddle.net/43dLktss/1/

I am thinking maybe jQuery animate on the focus event handler of the text boxes?

Upvotes: 0

Views: 1887

Answers (1)

Sablefoste
Sablefoste

Reputation: 4192

No additional javascript/jQuery necessary. Add an inner div, with relative position, height:100%; and overflow:scroll;

<div style="width:100%;height:100%;position:fixed;">
  <div style="height:100%;position:relative;overflow:scroll;">
    <input id="FirstName"> lots of padding here<input id="LastName">
  </div>
</div>

See the updated fiddle: https://jsfiddle.net/sablefoste/s0jmzph0/

Upvotes: 4

Related Questions