5

Tenho um menu dropdown utilizando twitter-bootstrap 3 e ele esta dentro de uma <li class="media">, então cada <li> tem um dropdown com algumas ações, acontece que quando como a altura da <li> é menor que a altura do menu ele não mostra todas as opções alguém sabe como resolver?

Exemplo no jsfiddle

http://jsfiddle.net/cx6qa617/

4
  • Uma coisa para poder tentar ajudar: no "aqui vai normal" você só coloca o conjunto ul.dropdown-menu?
    – Blau
    Commented 7/08/2014 às 1:23
  • tu diz trocar de lugar? Commented 7/08/2014 às 3:15
  • Não, perguntei qual a mudança que você faz e acaba funcionando.
    – Blau
    Commented 7/08/2014 às 3:32
  • Não, ali é um comentário do sistema... nada a ver com o problema, até vou editar o código Commented 7/08/2014 às 3:35

4 Respostas 4

2
+100

Ola.

Fiz uns testes aqui. Você deve adicionar a opção <li style='overflow:visible;', ficará assim: <li class="media" style="overflow:visible;border-bottom: solid 1px; margin-bottom: 2px; padding-bottom: 2px; " id="comment_71">.

Na <div class="media-body">, troque por <div class="panel-body"> que irá funcionar.

Vlw

2
  • Era isso mesmo, obrigado. Commented 11/08/2014 às 15:37
  • Certo, sempre as ordens! Abraços Commented 12/08/2014 às 16:46
2

O problema é que a <li class="media"> está com overflow:hidden;, adicionei style='overflow:visible;' e apareceu o dropdown.

4
  • Ficou a mesma coisa. Commented 9/08/2014 às 22:37
  • coloquei e funcionou, veja: jsfiddle.net/cx6qa617/9
    – Paulo
    Commented 9/08/2014 às 22:44
  • @DanielLemes é no elementro <li> e não na <div>, corrigi.
    – Paulo
    Commented 9/08/2014 às 22:46
  • 2
    Achei estranho porque a sua solução funcionava online e aqui não funcionou, foi quando vi a resposta do @Gilvan Andre percebi que você tirou a class da primeira div e assim ficou funcionando. Commented 11/08/2014 às 15:36
1

Não conheço nada de bootstrap, mas fiquei bem interessado...

O caminho parece ser por aqui:

CSS:

.dropdown-menu{
    position:fixed;
}

jquery:

$('.dropdown-toggle').click(function (){
            dropDownFixPosition($(this),$(this).next('.dropdown-menu'));
        });
function dropDownFixPosition(button,dropdown){
      var dropDownTop = button.offset().top + button.outerHeight();
        dropdown.css('top', dropDownTop + "px");
        dropdown.css('left', button.offset().left + "px");
}

jsfiddle: http://jsfiddle.net/jaderw/cx6qa617/3/

fonte: https://github.com/twbs/bootstrap/issues/7160


Verifique possíveis incompatibilidades em browsers diferentes:

IE 11: inserir a descrição da imagem aqui

Firefox: inserir a descrição da imagem aqui

0

z-index não funcionou?

<ul class="dropdown-menu" style="z-index:99999">
                <li><a href="#">Ação 1</a></li>
                <li><a href="#">Ação 2</a></li>
                <li class="divider"></li>
                <li><a href="#">Ação 3</a></li>
                <li><a href="#">Ação 4</a></li>
                <li><a href="#">Ação 5</a></li>
            </ul>

ou

<style>
    li { z-index:-1; }
</style>
1
  • Não funcionou, tentei das duas maneiras Commented 7/08/2014 às 0:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .