CODEWITHSUNDEEP
htmlcss
Jessica
Jessica

Reputation: 9830

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>

Upvotes: 3

Views: 2011

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371889

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

Upvotes: 3

user2235355
user2235355

Reputation: 26

@Jessica put your tabindex="-1" attribute on the second hidden input. This will fix the issue.

<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: 960px; 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 tabindex="-1" type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

LiamHarries
LiamHarries

Reputation: 580

your "sliderInnerWrapper" has a width of 940px whereas it container is 470px. this means the content will scroll inside the container. hitting tab is focusing the next object which causes the scroll accross to show the rest of the "sliderInnerWrapper"'s content.

Upvotes: 0

Related Questions