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:
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/
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">
overflow: auto). The dropdown height doesn't matter. I'll update the MPTurns 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.
You should increase the z-index for #left-menu and add: #left-menu .dropdown-menu { height:150px; overflow-y:auto; }
