Bootstrap drop down cutting

Question

Sto tentando di aggiungere un menu di impostazione a discesa alla sezione dei commenti in un progetto su cui ho lavorato.

Il menu a discesa sembra interrompersi e non sono sicuro del perché sia ​​così.

Ho provato overflow:visible and z-index:999. ma nessuno di loro sembra funzionare.

Questo è un blocco commento di base che sto cercando di includere un menu a discesa in

Questo è il codice di base che sto cercando di attuare

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

Ed è così che il mio menu a discesa si sta trasformando per essere CSS

supporti

.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

Verificare se la classe multimediale è ha overflow:hidden. In tal caso, sostituirlo con overflow: auto o overflow: visible.

Answer 2

scrittura come questo:

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

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

Può essere che sia di aiuto voi.

Answer 3

NUOVO METODO:

Basta portare menu a discesa fuori dalla classe media e utilizzare un margine negativo:

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

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

Answer 4

Questa non è una soluzione ideale come il menu non scorrere con l'elemento di destinazione, ma sto facendo questo per una tabella di dati di scorrimento come ultima risorsa, fino a quando posso trovare un'alternativa:

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

questo aggiungerà il menu per il corpo e ripulirlo sulla pelle. Sto usando l'interfaccia utente di jquery per il posizionamento ma puoi sostituirlo con il posizionamento jquery regolare se non vuoi aggiungere la dipendenza pesante. È inoltre possibile modificare $(window).on se si desidera eseguire questa operazione solo in una selezione limitata di menu a discesa.

Answer 5

Ottenere questo molto spesso sui progetti che eredito; tende ad essere un caso di quello di uno degli elementi capogruppo aventi

overflow: hidden

Una volta che rimuovo questo sembra funzionare come si aspettano (a patto che il disegno non si basa su questa proprietà).

Answer 6

Ho avuto lo stesso problema. Dopo aver aggiunto queste righe, la mia discesa ha lavorato proprio come mi aspettavo:

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

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

ho trovato la soluzione here