Content-dependent div with labels - css

Question

<div id="combobox">
<label><input type="checkbox" id="tag3"
name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label><br/>
<label><input type="checkbox" id="tag2"
name="checkbox" onclick="toggleTag('tag2')"/>fds</label><br/>
</div>
I'm using div as a container for checkboxes with labels. Corresponding css:
div#combobox
{
max-height: 150px;
overflow: auto;
border: 1px solid #000000;
}
And this does exactly what I want - vertical scrollbar (no horizontal one), capped height and content-dependent width. With one exception - it doesn't take vertical scrollbar's width into account. So when there are few lines/checkboxes and the vertical scrollbar isn't needed - the width of the div is the width of the widest checkbox. But when the scrollbar appears, the width of the div is unchanged:
The label is broken into 2 lines. I fixed this with span:
<span><label><input type="checkbox" id="tag4"
name="checkbox" onclick="toggleTag('tag4')"/>InitializeWindow</label></span><br/>
and:
span
{
white-space:nowrap;
}
but the div's width is still incorrect:
Is there any way to get make the div take scrollbar's width into account with just html/css? If not, what's the best way to do it with javascript?

Answer 1

I would suggest you to use something like this:
(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
So you can check if there is a scroll activated:
$('#combobox').hasScrollBar(); // returns true if there's a `vertical` scrollbar
after that you can expand the size of your div with some javascript...this would probably work for you:
$('#combobox').css("width",$('#combobox').width+13); //this is just an example to use 13px but you need to test it in all browsers to see how it all works