5

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?

I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.

Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?

JSFiddle: http://jsfiddle.net/vAsdJ/

HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>

CSS:
#menu{
    background:grey;
    height:150px;
    overflow-y:auto;
    float:left;
}

Script:
$('#add').button().click(function(){
    var d = $('<div/>');
    var b = $('<button type="button">Test</button>');
    d.appendTo($('#menu'));
    b.button().appendTo(d);
});
Community
  • 1
  • 1
tmpearce
  • 11,905
  • 2
  • 38
  • 57
  • 1
    I would trash the idea of having a scroll bar at all. And if you WANT a scrollbar, Make your own in javascript. The reason I say this is because all browser/OS combinations of scroll bars are different sizes. You would have to write a separate script for each combination to make the scrollbar height the right size. If you make your own scroll bar, it's always the same. Alternatively, you can make hover areas on the edges (or click arrows) of your navigation which will control the left and right animation of the large nav. – ntgCleaner Feb 03 '14 at 23:32
  • 1
    Really helpful question! I'll be curious about the answer myself. – BrettFromLA Feb 03 '14 at 23:34

2 Answers2

1

First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.

CSS Approach:

One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.

Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.

You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.

jQuery Approach:

Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.

Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:

if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
    $('#menu').css( "padding", "0 15px 0 0" );
}

To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.

There are probably many other methods, but this is how I would go about it.

Community
  • 1
  • 1
pschueller
  • 4,166
  • 2
  • 22
  • 49
  • This seems like a promising start. I'll go with it for now, and see if any other answers crop up that don't require manually setting up extra padding. – tmpearce Feb 04 '14 at 01:29
0

Have you tried simply using overflow-x: visible; or hidden

Trent Stewart
  • 775
  • 8
  • 17
  • This gets rid of the horizontal scrollbar at the bottom, but doesn't solve the problem of the div content getting clipped unfortunately. – tmpearce Feb 04 '14 at 01:27