Twitter Bootstrap button dropdown overflow issue when overflow properties are needed

Question

I'm creating a website where you have a menu on the left that can become super long, so I need to have the overflow-y: auto (and I put overflow-x: visible !important). Inside that menu I have a dropdown. But the dropdown is cut off on the right due to the overflow from the left menu. See image:

enter image description here

How can I make the dropdown appear properly? ie The dropdown shouldn't be cut on the right hand side.

Here is a JsFiddle: http://jsfiddle.net/ssL1yydx/41/

alebruck · Accepted Answer · 2015-05-12T20:48:55.307

1

I think you are probably looking for something like this http://jsfiddle.net/ssL1yydx/48/

#left-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 150px;
    background: #f1f1f1;
}
.btn-group {
    margin-left: 10px;
    margin-top: 30px;
}

#main-content{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 0;
}

.scroll {
 overflow-y: scroll;  
 max-height: 100%;
}

and added this wrapper class to the content that may be too long:

<div class="scroll">

edited May 12 '15 at 20:48

answered May 12 '15 at 20:34

alebruck

434
1
8
15

This still doesn't let the menu on the left scroll if the content in the menu is high. http://jsfiddle.net/9dpdbgb5/ – Brian Leishman May 12 '15 at 20:35
Sorry, misinterpreted the request. Updated the answer to reflect it. – alebruck May 12 '15 at 20:51
Apologies for making it unclear. What I meant was that the left menu could become super high (so needs an `overflow: auto`). The dropdown height doesn't matter. I'll update the MP – denislexic May 13 '15 at 07:30

score 0 · Answer 2 · edited May 23 '17 at 11:58

Turns out the real answer is that you cannot mix overflow-x:visible; and overflow-y:auto; and that's actually how it's in the spec.

Check this post CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

So probably the best and easiest to maintain solution would be to allow your left sidebar enough space to house everything that it needs to, in which this case I've set the width to 200px instead of 150px.

http://jsfiddle.net/t67jg2dh/

score 0 · Answer 3 · edited May 12 '15 at 21:23

0

You should increase the z-index for #left-menu and add: #left-menu .dropdown-menu { height:150px; overflow-y:auto; }

jsFiddle

edited May 12 '15 at 21:23

insertusernamehere

23,204
9
87
126

answered May 12 '15 at 20:44

Silence Peace

341
4
13

Twitter Bootstrap button dropdown overflow issue when overflow properties are needed

3 Answers3