Odcinanie rozwijania przy użyciu narzędzia rozruchowego

Question

Próbuję dodać menu ustawień rozwijanych do sekcji komentarzy w projekcie, nad którym pracowałem.

Menu rozwijane wydaje się odciąć i nie jestem pewien, dlaczego tak się dzieje.

Próbowałem overflow:visible and z-index:999. ale żaden z nich nie działa.

Jest to podstawowy blok komentarz, że staram się zawierać menu w

Jest to podstawowy kod, który próbuję wdrożyć

<div class="media"> 
    <a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a> 
    <div class="dropdown pull-right"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;"> 
      <b data-icon="&#xe001;"></b> <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> 
      <li><a href="#"><i class="icon-trash"></i> Delete</a></li> 
      <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> 
      <li class="divider"></li> 
      <li><a href="#"><i class="i"></i> Make admin</a></li> 
     </ul> 
    </div> 
    <div class="media-body"> 
     <h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4> 
     <p> 
      Main body of the comment 
     </p> 
    </div> 
</div> 

I to jest jak mój menu rozwijanego obraca się CSS

mediów

.media, 
.media-body { 
    overflow: hidden; 
    *overflow: visible; 
    zoom: 1; 
} 
.media, 
.media .media { 
    margin-top: 15px; 
} 
.media:first-child { 
    margin-top: 0; 
} 
.media-object { 
    display: block; 
} 
.media-heading { 
    margin: 0 0 5px; 
} 
.media .pull-left { 
    margin-right: 10px; 
} 
.media .pull-right { 
    margin-left: 10px; 
} 
.media-list { 
    margin-left: 0; 
    list-style: none; 
} 

Answer 1

Sprawdź, czy klasa mediów ma numer overflow:hidden. Jeśli tak, wymień go na overflow: auto lub overflow: visible.

Answer 2

Napisz tak:

.media, 
.media-body { 
    overflow: visible; 
} 

.media:after, 
.media-body:after{ 
content:''; 
clear:both; 
display:block; 
} 

Może to pomóc.

Answer 3

NOWA METODA:

Wystarczy przynieść menu rozwijane z klasy medialnej i używać ujemny margines:

<div class="dropdown pull-right" style="margin-left:-30px"> 
    ... 
</div> 

<div class="media"> 
    ... 
</div> 

Answer 4

To nie jest idealnym rozwiązaniem, ponieważ menu nie będzie się przewijał z elementem docelowym, ale robię to dla przewijania tabeli danych w ostateczności aż znajdę alternatywę:

(function() {            
    var dropdownMenu;          
    $(window).on('show.bs.dropdown', function(e) {   
    dropdownMenu = $(e.target).find('.dropdown-menu'); 
    $('body').append(dropdownMenu.detach());   
    dropdownMenu.css('display', 'block');    
    dropdownMenu.position({       
     'my': 'right top',        
     'at': 'right bottom',       
     'of': $(e.relatedTarget)      
    })             
    });             
    $(window).on('hide.bs.dropdown', function(e) {   
    $(e.target).append(dropdownMenu.detach());   
    dropdownMenu.hide();        
    });             
})();     

ta dołączy do menu dla organizmu i oczyścić go na skórze. Używam jquery UI do pozycjonowania, ale możesz go zastąpić regularnym pozycjonowaniem jquery, jeśli nie chcesz dodawać dużej zależności. Możesz także zmienić $(window).on, jeśli chcesz to zrobić tylko w przypadku ograniczonego wyboru list rozwijanych.

Answer 5

Zdobądź to często na projekty, które dziedziczę; wydaje się być przypadek jednym z jednym z elementów dominujących mających

overflow: hidden

Raz usunąć ten wydaje się działać jak oczekiwać (o ile twój projekt nie opiera się na tej nieruchomości).

Answer 6

Miałem ten sam problem. Po dodaniu tej linii, mój rozwijana pracował tak jak się spodziewałem:

@media (max-width: 767px) { 
    .table-responsive .dropdown-menu { 
     position: static !important; 
    } 
} 

@media (min-width: 768px) { 
    .table-responsive { 
     overflow: visible; 
    } 
} 

znalazłem rozwiązanie here