How to display a dropdown menu of a button inside a div with overflow: hidden?

Navigation
2

I have the following problem:

Clicking the dropdown button inside a div with overflow: hidden property opens, but gets cut off. Example:

HTML

<divclass="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;
}

link - Complete structure: link

How to solve this?

PS: I'm using bootstrap;

    
asked by anonymous 20.06.2014 / 15:12

3 answers

2

I do not know the entire structure of your page, plus a suggestion using position:fixed for menu-dropdown : 

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

Example: JSFiddle

With jQuery you can get 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

    
20.06.2014 / 15:58
0

Do you really need to set yourself as hidden? Have you tried resetting the property?

.scroll{ overflow: inherit; }

Update your example

    
23.06.2014 / 20:15
0

I think ideally, it would be your div tab-content having a height fixed.

    
20.06.2014 / 15:17
How to use button for page navigation Remote PHP access with Ajax - Return is the PHP code itself