CODEWITHSUNDEEP
htmlcss
JoeyP
JoeyP

Reputation: 2702

Tabbing causes overflow content to shift up

I have a div with a defined height and overflow set to hidden. If there are anchors in the overflow content the visible content of the div will shift up, meaning the content that I want to show will be pushed off the top of the div and the anchor will move to the center of the visible portion of the div. No scrollbars are shown (a good thing) so the content is kind of stuck there.

HTML

<div class="container">
    <div class="show-content">Click in the box and hit tab</div>
    <div class="overflow-content">
        <a href="javascript:void(0);">Pesky Link</a>
        <a href="javascript:void(0);">Pesky Link 2</a>
    </div>
</div>

CSS

.container{
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
}
.show-content{
    line-height: 100px;
    height: 100px;
    font-size: 16px;
}
.overflow-content a{
    display: block;
    margin-top: 40px;
    line-height: 20px;
    font-size: 16px;
}

Here is the fiddle. Click inside the box and hit tab to see what I mean http://jsfiddle.net/2seLJ/1/

My use case for this is that I have a dropdown menu with links that I only want to show on when the user clicks 'show dropdown'. The visible content has an input box so if the user tabs from the input box the links are shown and there is no way to get back to the input box short of tabbing through the entire page. Can this only be solved by adding tabindex="-1" to all the links?

Upvotes: 5

Views: 4382

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60577

Alternative Solution

When this happens, the parent element that has overflow: hidden applied will scroll to put the focused element in view, and the scrollTop and/or scrollLeft properties become a positive integer, despite the fact that there is no scrollbar.

One way around this issue, that involves no extra markup or DOM manipulation, would be to have an event listener that resets the scroll position of the overflow: hidden parent back to 0.

jQuery Example:

$(document).on('focus', '.some-overflow-hidden-element > *', function() {
    $(this).closest('.some-overflow-hidden-element').scrollTop(0).scrollLeft(0);
});

NOTE: If you are going to do this, make sure you are not destroying your accessibility in the process. This is not usually the best option, as the hidden elements can still be focused by things like tab.

Upvotes: 7

htxryan
htxryan

Reputation: 2961

It sounds like you want to prevent the tabstop behavior on that anchor. See this: Prevent tabstop on A element (anchor link) in HTML

<div class="container">
    <div class="show-content">Click in the box and hit tab</div>
    <div class="overflow-content">
        <a href="javascript:void(0);" tabindex="-1">Pesky Link</a>
        <a href="javascript:void(0);" tabindex="-1">Pesky Link 2</a>
    </div>
</div>

Fiddle: http://jsfiddle.net/2seLJ/2/

Alternatively

You can use jQuery to do this programatically for all links inside "overflow-content" divs:

$(document).ready(function(){
    $('div.overflow-content a').attr('tabindex', '-1');
});

Fiddle: http://jsfiddle.net/2seLJ/3/

Upvotes: 6

Related Questions