Why does a list with a scrollbar break an item over two lines

Question

If I have an unordered list with a number of items, and a max height set on this list with the ul set to display: inline-block (or floated). Then the scrollbar seems to take up the space "inside" the list forcing text to wrap around.

How can I avoid this? I don't mind if the scrollbar makes the list wider, I just want the list to take up its natural space.

http://jsbin.com/AzeBuHU/2/edit?html,css,output

Thanks

So it does. Apologies. Why not just increase the width of the list? Or is the text variable and you don't want wrap ever? — christopher, Oct 09 '13 at 15:58
Yeah it is variable, I am going to set a max-width but I want to be in control of that! — hcharge, Oct 09 '13 at 15:59
You want to be in control of _what_ exactly? I don’t really get what your desired outcome is in the different scenarios. — CBroe, Oct 09 '13 at 16:03
So in the current example the 5th item breaks even though I don't want it to, but I may want it to hit a certain max width at a certain point wider — hcharge, Oct 09 '13 at 16:05
I guess you could add `white-space: nowrap;` to your li elements but then you would get a horizontal scroll bar... seems to be tricky without js — , Oct 09 '13 at 16:06
JavaScript would be overkill for this I feel. I may add ellipsis to the lines with nowrap — hcharge, Oct 09 '13 at 16:07
those this help your question? http://stackoverflow.com/questions/10149503/putting-a-scrollbar-outside-padded-region — , Oct 09 '13 at 16:07
@Swayze that may help, I can't check atm but I'll let you know! — hcharge, Oct 09 '13 at 16:09

score 0 · Answer 1 · answered Oct 09 '13 at 16:07

0

overflow-y: scroll; for UL seems to be a fix, but you'll have the scrollbar everytime, even for few items minor to UL height.

Demo

answered Oct 09 '13 at 16:07

EdenSource

3,387
16
29

hmm yeah that's not going to be ideal as my list will probably be shorter than this most of the time and the scrollbar is in a worst case scenario, sorry! – hcharge Oct 09 '13 at 16:09

score 0 · Accepted Answer · answered Oct 09 '13 at 16:25

0

Add this in the CSS. That will prevent the list items from wrapping, and add extra space for the scrollbar.

li {
    padding-right:20px; 
    white-space:nowrap;
}

answered Oct 09 '13 at 16:25

andi

6,442
1
18
43

score -2 · Answer 3 · answered Oct 09 '13 at 16:00

-2

Do not give max-height, as it will now take more height than that. You can give ,

height:auto;

Otherwise you can try

overflow:visible;

This will show scrollbars whenever data is more.

answered Oct 09 '13 at 16:00

Kishori

1,065
6
12

No I need a max-height... As I only want to show upto a certain amount of items – hcharge Oct 09 '13 at 16:01
No, an element with `height:auto` and no `max-height` will of course _not_ show a vertical scrollbar … – CBroe Oct 09 '13 at 16:01

Why does a list with a scrollbar break an item over two lines

3 Answers3