Bootstrap Drop-Down-Abschneiden

Question

Ich versuche, ein Drop-down-Einstellungsmenü zu meinem Kommentarabschnitt in einem Projekt hinzuzufügen, an dem ich gearbeitet habe.

Das Dropdown-Menü scheint sich abzuschneiden und ich bin nicht sicher, warum das der Fall ist.

Ich versuchte overflow:visible and z-index:999. aber keiner von ihnen scheint zu funktionieren.

Dies ist ein grundlegender Kommentarblock, die ich in

eine Dropdown-Liste enthalten versuche Dies ist der grundlegende Code, den ich

<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> 

Und das ist, wie mein Dropdown-Menü dreht sie zu implementieren versuchen out

Medien CSS

zu sein

.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

Überprüfen Sie, ob die Medienklasse overflow:hidden hat. Wenn ja, ersetzen Sie es durch overflow: auto oder overflow: visible.

Answer 2

schreiben wie folgt aus:

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

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

Kann sein, das ist Ihnen zu helfen.

Answer 3

NEUE METHODE:

Bringen Sie einfach Menü aus der Medienklasse fällt nach unten und eine negativen Marge verwenden:

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

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

Answer 4

Dies ist keine ideale Lösung, wie das Menü nicht mit dem Zielelement bewegen, aber ich tue dies für eine Scroll-Datentabelle als letztes Mittel, bis ich eine Alternative finden:

(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();        
    });             
})();     

Dies wird das Menü auf den Körper anhängen und reinigen sie es oben auf auszublenden. Ich benutze jquery UI für die Positionierung, aber Sie können es durch regelmäßige jquery Positionierung ersetzen, wenn Sie nicht die schwere Abhängigkeit hinzufügen möchten. Vielleicht möchten Sie auch $(window).on ändern, wenn Sie dies nur mit einer begrenzten Auswahl von Dropdowns tun möchten.

Answer 5

Holen Sie sich dies oft auf Projekte, die ich erben;

Überlauf neigt ein Fall, der einen von einer übergeordneten Elemente zu handeln, die versteckt

Sobald ich diese entfernen Sie es wie erwartet (solange Ihr Design auf dieser Eigenschaft beruht nicht) scheint zu funktionieren.

Answer 6

Ich hatte das gleiche Problem. Nach dem Hinzufügen dieser Zeilen, arbeitete mein Dropdown wie ich erwartet hatte:

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

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

ich die Lösung here