14427

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?

Answer1:

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/

<strong>Alternatively</strong>

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/

Answer2:

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.

<strong>jQuery Example:</strong>

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

<strong>NOTE:</strong> 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.

Recommend

  • How do I recognize a line break with a switch case that evaluates a char in Java?
  • How to add System.Windows dll to Visual Studio 2010 express?
  • Function JavaScript : on Menu CSS HTML
  • How do you keep a running instance for Google App Engine
  • Select inner HTML item in CSS
  • WordPress > setting permalink option via script buggy?
  • How to add closing tag for canvas in three js rendered Canvas?
  • AlertDialog style when using setView()
  • Cut the background to expose the layer below
  • Outlines on links in IE9 remains when focus is changed
  • HTML5 video only works in IE. The other browsers shows the black screen
  • AndEngine Applying Transparancy to AndEngine View
  • Simulate click Geckofx vb,net
  • Adjust width of select element according to selected option's width
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Custom validator control occupying space even though display set to dynamic
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • Highlight and Bold text in JTextPane
  • Change multiple background-images with jQuery
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Debugging ASP.NET on a built-in web server suddenly stops
  • Xamarin Forms - UWP Fonts
  • Change JButton Shape while respecting Look And Feel
  • Using $this when not in object context
  • JFileChooser in front of fullscreen Swing application
  • How do I fake an specific browser client when using Java's Net library?
  • How reduce the height of an mschart by breaking up the y-axis
  • HTML download movie download link
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • Perl system calls when running as another user using sudo
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • How to push additional view controllers onto NavigationController but keep the TabBar?