Twitter Bootstrap Question posted in

Twitter Bootstrap button dropdown overflow issue when overflow properties are needed

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/

Tags:

3

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

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

    jsFiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search