How to view a dropdown menu of a button inside a div with overflow: Hidden?

Question

I have the following problem:

by clicking on the dropdown button inside a div with overflow property: Hidden it opens, but gets cropped. Example:

HTML

<div class="scroll">
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>
    <div class="out_element">
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
            Ação <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Ação</a></li>
          <li><a href="#">Outra ação</a></li>
          <li><a href="#">Algo a mais aqui</a></li>
          <li class="divider"></li>
          <li><a href="#">Link separador</a></li>
        </ul>
    </div>
</div>

</div>

CSS

body{
    height: 2000px;
}
.scroll{
    white-space: nowrap;
    width: 100%;
    overflow: auto;
    margin-top:100px;
}
.out_element{
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    display: inline-block;
}
ul.dropdown-menu{
    position:fixed;
    overflow:visible;
}

http://jsfiddle.net/VVVBk/3/ - Complete structure: http://jsfiddle.net/VVVBk/5/

How to solve this?

PS: I’m wearing a bootstrap;

Answer 1

I don’t know the whole structure of your page, but follow a suggestion using position:fixed to the menu-dropdown:

ul.dropdown-menu{
    position: fixed;
    top: 10px;
    left: 20px;
    overflow: visible;
}

Example: Jsfiddle

With jQuery you can grab the position of the button clicked and assign to dropdown

$('button.dropdown-toggle').click(function(){
   var pos = $(this).offset(); //posição do elemento
   var alt = $(this).height(); //altura do elemento
   var w = $(window);
   //adiciona a posição que o elemento deve ficar corrigindo se houver scroll
   $(this).siblings('ul.dropdown-menu').css({"left":pos.left-  w.scrollLeft(),"top":pos.top+alt-w.scrollTop()});
});

//corrige a posição do elemento quando houver scroll
$(window).scroll(function(){
    var pos = $('.open>.dropdown-menu').siblings('button.dropdown-toggle').offset();
    var alt = $('.open>.dropdown-menu').siblings('button.dropdown-toggle').height();
    var w = $(window);
    $('.open>.dropdown-menu').css({"left":pos.left-w.scrollLeft(),"top":pos.top+alt-w.scrollTop()});
});
//para fechar qdo scroll div
$('.scroll').scroll(function(){
    $('.open>.dropdown-menu').dropdown('toggle');
});

Example: jQuery

Answer 2

I think the ideal would be your div tab-content have a height fixed.

Answer 3

Do you really need to set to Hidden? Have you tried resetting the property?

.scroll{ overflow: inherit; }

Update of your example