Jessica Jessica - 5 months ago 7
CSS Question

Content moves to left side when 'tab' key is pressed

I was creating something more complex than the code snippet bellow, until I encountered a bug.

If you click on the textfield, then hit Tab, the textfield and its' siblings move way over to the left side.

What is causing this, and how can I stop it from happening?

(The reason there are so many unnecessary

divs
, is because as I said before, this is from a much more complex project. I narrowed it down to the following.)

JSFiddle





<div id="fullWrapper" style="width: 470px;">
<div id="pickerWrapper" style="width: 470px;">
<div id="overallSlidersWrapper" style="position: relative; background-color: greenYellow;">
<div class="sliderOuterWrapper" style="overflow: hidden;">
<div class="sliderInnerWrapper" style="width: 940px; display: flex;">
<div class="sliderInnerContentWrapper" style="overflow: hidden; width: 470px;">
<div class="sliderContent">
<input type="text">
<img src="http://i.imgur.com/nYp8cnV.jpg" />
</div>
</div>
<div class="sliderInnerContentWrapper" style="overflow: hidden; width: 0px;">
<div class="sliderContent">
<input type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Answer

You're tabbing to the next element: the image.

If you hit SHIFT-TAB (reverse tab function in Windows), you'll end up back in the input.

The effect is caused by child elements being larger than their containers. If you switch the overflowing elements from width: 940px to width: 100%, the shifting effect is removed.

Revised Demo


tabindex

With the tabindex attribute you can control the tabbing order.

  • Elements with a positive value are navigated first, in chronological order
  • Elements that don't support tabindex or have a value of 0 tab next, in HTML source order
  • Elements with a negative value (e.g. tabindex="-1") cannot receive focus via tabbing

More details here: 7.4.1 Sequential focus navigation and the tabindex attribute

Comments