Bootstrap Drop-Down durch Überlauf abgeschnitten: versteckter Container, wie ändert man den Container?

Question

Mit Bootstrap habe ich ein Dropdown-Menü (s) in einem div mit overflow:hidden, die so sein muss. Dadurch wurden die Dropdown-Listen vom Container abgeschnitten.

Meine Frage, wie kann ich dieses Clipping Problem, z. Ändern Sie den Container aller Dropdown-Elemente in meinem Projekt zu body, mit möglichst geringen Kosten?

dies ist ein Beispiel für den Code: http://jsfiddle.net/0y3rk8xz/

Answer 1

wenn jemand Interesse an einer Abhilfe für dieses, Bootstrap-Drop-Down ein show.bs.dropdown Ereignis hat Sie verwenden, um die Drop-down-Element außerhalb des overflow:hidden Behälter zu bewegen. Sie können die Position des Dropdown-Containers einfach erfassen und basierend darauf absolut positionieren.

$('.dropdown').on('show.bs.dropdown', function() { 
    $('body').append($('.dropdown').css({ 
    position: 'absolute', 
    left: $('.dropdown').offset().left, 
    top: $('.dropdown').offset().top 
    }).detach()); 
}); 

gibt es auch eine hidden.bs.dropdown Ereignis, wenn Sie es vorziehen, um das Element zu bewegen zurück, wo er hingehört, wenn der Drop-Down geschlossen ist:

$('.dropdown').on('hidden.bs.dropdown', function() { 
    $('.bs-example').append($('.dropdown').css({ 
    position: false, 
    left: false, 
    top: false 
    }).detach()); 
}); 

Hier ist ein funktionierendes Beispiel:

http://jsfiddle.net/qozt42oo/32/

Answer 2

einfach den Überlaufwert zu visible ändern.

Answer 3

Ändern Sie die div-Eigenschaft auf overflow:visible; oder Set Position:absolute; auf .dropdown Klasse wie

.bs-example .dropdown{position:absolute;} 

Siehe Arbeits Code: http://jsfiddle.net/guruWork/3x1f8ng5/

Answer 4

Ändern des Behälters möglich ist mit jQuery z.B. $(".dropdown").insertAfter(".bs-example");

Sehen Sie diesen Code zum Beispiel: https://jsfiddle.net/SolveItSimply/pwmyvsw6/

ich das nicht, obwohl empfehlen, da Sie eine der Nützlichkeit von Bootstrap Positionierung verlieren und werden die Drop-down-Elemente in Ordnung zu halten chaotisch.

Stattdessen könnten Sie overflow:visible zusammen mit der "versteckten" Klasse zu Ihrem Vorteil verwenden und jedes Element verstecken, das mit JavaScript überläuft. Hier ein Beispiel: http://jsfiddle.net/SolveItSimply/z14c210x/

Sie müssen die enthaltenen Elemente überprüfen, wenn das Div zuerst sichtbar ist und wenn sich die Höhe des Containers ändert, was ich in meinem Beispiel versucht habe zu demonstrieren.

Answer 5

Ich konnte nicht um den Behälter zu overflow:visible gesetzt, sondern ein

<div class="clearfix" /> 

unterhalb des Blocks Einsetzen des Dropdown enthält das Problem für mich gelöst.

Answer 6

Ich war mit dem gleichen Problem konfrontiert und nach der Suche nach Stunden .. Ich erstellte einen Event-Handler, um die Drop-Down-Toggle abzufangen und die Positionen zu erhalten und es dynamisch anzuhängen. damit es nicht abgeschnitten wird.

Hier ist der einfache Code, den ich verwendet habe. Probieren Sie es aus, wenn das hilft.

$('.dropdown-toggle').click(function(){ 
    dropDownFixPosition($('button'),$('.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"); 
    } 

Answer 7

stand ich vor dem gleichen Problem, mit benötigen overflow:hidden Set haben, aber noch in der Dropdown-haben nicht abgeschnitten werden.

Wie auch immer, meine Situation beinhaltete die Bootstrap Carousel, also entschied ich eine gültige Lösung würde den Überlauf nur sichtbar machen, wenn das Dropdown geöffnet ist, und wenn es geschlossen wird, kann der Überlauf zu versteckt zurückkehren. Diese Lösung könnte für andere funktionieren, also teile ich sie.

$('.dropdown-toggle').click(function() { 
    var $container = $(this).parent('.carousel-inner'); 
    $container.css('overflow','visible'); 
    $(document).one('click', function() { 
     $container.css('overflow',''); 
    });   
}); 

Hinweis, diese sucht nicht nach Esc Schlüsseln verwendet wird, um den Drop-Down, aber in meinem Fall zu schließen, war dies kein Problem.Meine eigene Version verwendet eine Klasse, um den Stil anzuwenden, den manche Entwickler bevorzugen, anstatt Inline-CSS zu modifizieren.

Answer 8

Ich hatte irgendeine Art von Scroll-Problem mit den meisten Lösungen in dieser und anderen Fragen, die ich auf SO gesehen habe. Was für mich gearbeitet wurde so dass die Drop-Down-Position inherit:

.dropdown { 
    position: inherit; 
} 

Und dann stellen Sie die dropdown-menu Position mit Hilfe von JavaScript:

$(document).on("show.bs.dropdown", function() { 
    var dropdownToggle = $(this).find(".dropdown-toggle"); 
    var dropdownMenu = $(this).find(".dropdown-menu"); 
    dropdownMenu.css({ 
    "top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px", 
    "left": dropdownToggle.position().left + "px" 
    }); 
}); 

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/ck66ee9q/

Answer 9

Meine Lösung war, zu verwenden statische Positionierung im Dropdown-Menü Ich hatte das Dropdown in einer Bootstrap-Tabelle mit Überlauf versteckt.

<div class="table" style="overflow: hidden;"> 
    <div class="dropdown" style="position: static;"> 
    <div class="dropdown-menu">...</div> 
    </div> 
</div> 

Es funktionierte jedoch nicht mit Ihrer Geige. Ich bin mir also nicht sicher, ob meine Lösung etwas mit Bootstrap-Tabellen zu tun hat. Egal, vielleicht gibt es jemandem etwas neues zu versuchen.