Ich habe ein Problem mit Dropdown-Schaltflächen in Tabellen, wenn diese reagieren und aktiv scrollen, da das Dropdown-Menü aufgrund von overflow: auto;
Eigenschaften nicht sichtbar ist . Wie kann ich das beheben, um die Dropdown-Option der Schaltfläche anzuzeigen, wenn diese reduziert ist? Ich kann etwas jQuery verwenden, aber nachdem ich Probleme mit dem Scrollen von links nach rechts habe, habe ich beschlossen, eine andere Lösung zu finden. Ich habe ein Foto angehängt, um es besser zu verstehen.
quelle
$('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
.table-responsive
Klasse maskiert ), werden beim Bearbeiten vollständig ausgeblendet.Eine reine CSS- Lösung besteht darin, die y-Achse überlaufen zu lassen.
http://www.bootply.com/YvePJTDzI0
BEARBEITEN
Eine andere reine CSS-Lösung besteht darin, den Überlauf basierend auf der Breite des Ansichtsfensters reaktionsschnell anzuwenden:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: static !important; } } @media (min-width: 768px) { .table-responsive { overflow: inherit; } }
https://www.codeply.com/go/D3XBvspns4
quelle
Als Referenz ist es 2018 und ich verwende BS4.1
Versuchen Sie
data-boundary="viewport"
, der Schaltfläche, mit der das Dropdown-Menü umgeschaltet wird (die mit der Klassedropdown-toggle
), etwas hinzuzufügen . Siehe https://getbootstrap.com/docs/4.1/components/dropdowns/#optionsquelle
Ich hatte einen anderen Ansatz gewählt, das Element vom übergeordneten Element getrennt und es von jQuery auf die absolute Position gesetzt
Arbeitendes JS-Fidle: http://jsfiddle.net/s270Lyrd/
Die JS-Lösung, die ich verwende.
//fix menu overflow under the responsive table // hide menu on click... (This is a must because when we open a menu ) $(document).click(function (event) { //hide all our dropdowns $('.dropdown-menu[data-parent]').hide(); }); $(document).on('click', '.table-responsive [data-toggle="dropdown"]', function () { // if the button is inside a modal if ($('body').hasClass('modal-open')) { throw new Error("This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element") return true; } $buttonGroup = $(this).parent(); if (!$buttonGroup.attr('data-attachedUl')) { var ts = +new Date; $ul = $(this).siblings('ul'); $ul.attr('data-parent', ts); $buttonGroup.attr('data-attachedUl', ts); $(window).resize(function () { $ul.css('display', 'none').data('top'); }); } else { $ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']'); } if (!$buttonGroup.hasClass('open')) { $ul.css('display', 'none'); return; } dropDownFixPosition($(this).parent(), $ul); function dropDownFixPosition(button, dropdown) { var dropDownTop = button.offset().top + button.outerHeight(); dropdown.css('top', dropDownTop + "px"); dropdown.css('left', button.offset().left + "px"); dropdown.css('position', "absolute"); dropdown.css('width', dropdown.width()); dropdown.css('heigt', dropdown.height()); dropdown.css('display', 'block'); dropdown.appendTo('body'); } });
quelle
Diese Lösung hat bei mir hervorragend funktioniert:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: static !important; } } @media (min-width: 768px) { .table-responsive { overflow: visible; } }
Weitere Details: https://github.com/twbs/bootstrap/issues/15374
quelle
meine 2 ¢ schnelle globale Lösung:
// drop down in responsive table (function () { $('.table-responsive').on('shown.bs.dropdown', function (e) { var $table = $(this), $menu = $(e.target).find('.dropdown-menu'), tableOffsetHeight = $table.offset().top + $table.height(), menuOffsetHeight = $menu.offset().top + $menu.outerHeight(true); if (menuOffsetHeight > tableOffsetHeight) $table.css("padding-bottom", menuOffsetHeight - tableOffsetHeight); }); $('.table-responsive').on('hide.bs.dropdown', function () { $(this).css("padding-bottom", 0); }) })();
Erläuterungen: Wenn ein Dropdown-Menü in einer '.table-responsive' angezeigt wird, berechnet es die Höhe der Tabelle und erweitert sie (mit Auffüllung), um der Höhe zu entsprechen, die für die Anzeige des Menüs erforderlich ist. Das Menü kann beliebig groß sein.
In meinem Fall ist dies nicht die Tabelle mit der Klasse '.table-responsive', sondern ein Wrapping-Div:
<div class="table-responsive" style="overflow:auto;"> <table class="table table-hover table-bordered table-condensed server-sort">
Die $ table var im Skript ist also tatsächlich ein div! (nur um klar zu sein ... oder nicht) :)
Hinweis: Ich verpacke es in eine Funktion, damit meine IDE die Funktion reduzieren kann;) aber es ist nicht obligatorisch!
quelle
Ich habe eine Lösung, die nur CSS verwendet. Verwenden Sie nur die relative Position für Dropdowns innerhalb der Tabelle:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: relative; /* Sometimes needs !important */ } }
https://codepen.io/leocaseiro/full/rKxmpz/
quelle
Definieren Sie diese Eigenschaften. Viel Glück!
data-toggle="dropdown" data-boundary="window"
quelle
Dies wurde in Bootstrap v4.1 und höher durch Hinzufügen von
data-boundary="viewport"
( Bootstrap Dropdowns Docs ) behoben.Aber für frühere Versionen (v4.0 und niedriger) habe ich dieses Javascript- Snippet gefunden , das perfekt funktioniert. Es funktioniert für kleine Tabellen und Bildlauftabellen:
$('.table-responsive').on('shown.bs.dropdown', function (e) { var t = $(this), m = $(e.target).find('.dropdown-menu'), tb = t.offset().top + t.height(), mb = m.offset().top + m.outerHeight(true), d = 20; // Space for shadow + scrollbar. if (t[0].scrollWidth > t.innerWidth()) { if (mb + d > tb) { t.css('padding-bottom', ((mb + d) - tb)); } } else { t.css('overflow', 'visible'); } }).on('hidden.bs.dropdown', function () { $(this).css({'padding-bottom': '', 'overflow': ''}); });
quelle
@ Wazime-Lösung ein wenig aufgeräumt. Funktioniert hervorragend als allgemeine Lösung.
$(document).on('shown.bs.dropdown', '.table-responsive', function (e) { // The .dropdown container var $container = $(e.target); // Find the actual .dropdown-menu var $dropdown = $container.find('.dropdown-menu'); if ($dropdown.length) { // Save a reference to it, so we can find it after we've attached it to the body $container.data('dropdown-menu', $dropdown); } else { $dropdown = $container.data('dropdown-menu'); } $dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px'); $dropdown.css('left', $container.offset().left + 'px'); $dropdown.css('position', 'absolute'); $dropdown.css('display', 'block'); $dropdown.appendTo('body'); }); $(document).on('hide.bs.dropdown', '.table-responsive', function (e) { // Hide the dropdown menu bound to this button $(e.target).data('dropdown-menu').css('display', 'none'); });
quelle
Die empfohlene und gewählte Lösung ist nicht immer die beste Lösung. Leider ist es die Lösung, die Linkedin kürzlich verwendet hat, und es werden je nach Situation mehrere Bildlaufleisten auf der Seite erstellt.
Meine Methode war etwas anders.
Ich habe das auf Tabellen reagierende Div in einem anderen Div enthalten. Dann habe ich Höhe 100%, Breite: 100%, Anzeigeblock und Position absolut angewendet, sodass Höhe und Breite auf der Seitengröße basieren, und den Überlauf auf ausgeblendet gesetzt.
Dann habe ich auf dem Tisch Responsive Div eine Mindesthöhe von 100% hinzugefügt
<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;"> <div class="table-responsive" style="min-height:100%;">
Wie Sie im folgenden Arbeitsbeispiel sehen können, keine hinzugefügten Bildlaufleisten, kein lustiges Verhalten und praktisch die Verwendung von Prozentsätzen - es sollte unabhängig von der Bildschirmgröße funktionieren. Ich habe dies jedoch nicht dafür getestet. Wenn dies aus irgendeinem Grund fehlschlägt, kann man 100% durch 100vh bzw. 100vw ersetzen.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;"> <div class="table-responsive" style="min-height:100%;"> <table class="table"> <thead> <tr> <th>Value1</th> <th>Value2</th> <th>Value3</th> <th>Value4</th> </tr> </thead> <tbody> <tr> <td> DATA <div class="btn-group btn-group-rounded"> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li role="seperator" class="divider"></li> <li><a href="#">Four</a></li> </ul> </div> </td> <td> DATA <div class="btn-group btn-group-rounded"> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li role="seperator" class="divider"></li> <li><a href="#">Four</a></li> </ul> </div> </td> <td> DATA <div class="btn-group btn-group-rounded"> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li role="seperator" class="divider"></li> <li><a href="#">Four</a></li> </ul> </div> </td> <td>DATA</td> </tr> <tr> <td> DATA <div class="btn-group btn-group-rounded"> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li role="seperator" class="divider"></li> <li><a href="#">Four</a></li> </ul> </div> </td> <td> DATA <div class="btn-group btn-group-rounded"> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li role="seperator" class="divider"></li> <li><a href="#">Four</a></li> </ul> </div> </td> <td> DATA <div class="btn-group btn-group-rounded"> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li role="seperator" class="divider"></li> <li><a href="#">Four</a></li> </ul> </div> </td> <td>DATA</td> </tr> </tbody> </table> </div> </div>
quelle
Basierend auf der akzeptierten Antwort und der Antwort von @LeoCaseiro habe ich Folgendes in meinem Fall verwendet:
@media (max-width: 767px) { .table-responsive{ overflow-x: auto; overflow-y: auto; } } @media (min-width: 767px) { .table-responsive{ overflow: inherit !important; /* Sometimes needs !important */ } }
Auf großen Bildschirmen wird das Dropdown-Menü nicht hinter der Antworttabelle versteckt, und auf kleinen Bildschirmen wird es ausgeblendet, aber es ist in Ordnung, da es auf Mobilgeräten sowieso eine Bildlaufleiste gibt.
Hoffe das hilft jemandem.
quelle
Burebistaruler Antwort funktioniert in Ordnung für mich auf ios8 (iphone4s), aber Woks auf Android, die vorher funktionierte. Was ich nicht getan habe, funktioniert für mich auf ios8 (iphone4s) und andoir ist:
$('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "min-height", "400px" ); }); $('.table-responsive').on('hide.bs.dropdown', function () { $('.table-responsive').css( "min-height", "none" ); })
quelle
Dies könnte für jemand anderen nützlich sein. Ich benutze DatatablesJS. Ich addiere 500px zur aktuellen Höhe der Tabelle. Ich mache das, weil Sie mit Datatables 10, 20 usw. Seiten in Ihrer Tabelle verwenden können. Also muss ich die Höhe des Tisches dinamisch berechnen.
Wenn Dropdown angezeigt wird, füge ich zusätzliche Höhe hinzu.
Wenn das Dropdown-Menü ausgeblendet ist, setze ich die Höhe des Originaltisches zurück.
$(document).ready(function() { $('.table-responsive .dropdown').on('shown.bs.dropdown', function () { console.log($('#table-responsive-cliente').height() + 500) $("#table-responsive-cliente").css("height",$('#table-responsive-cliente').height() + 500 ); }) $('.table-responsive .dropdown').on('hide.bs.dropdown', function () { $("#table-responsive-cliente").css("height","auto"); }) })
Und der HTML
<div class="table-responsive" id="table-responsive-cliente"> <table class="table-striped table-hover"> .... .... </table> </div>
Vor:
Nach dem Dropdown wird angezeigt:
quelle
Wir haben dieses Problem hier bei der Arbeit gelöst, indem wir eine .dropup-Klasse auf das Dropdown-Menü angewendet haben, wenn sich das Dropdown-Menü am unteren Rand einer Tabelle befindet. Geben Sie hier die Bildbeschreibung ein
quelle
$('table tr:nth-last-child(-n+3) td').addClass('dropup')
.Dies funktionierte für mich in Bootstrap 4, da es andere Haltepunkte als v3 hat:
@media (min-width: 992px) { .table-responsive { overflow: inherit; } }
quelle
Solange die Leute noch in dieser Ausgabe stecken und wir schon im Jahr 2020 sind. Ich erhalte eine reine CSS-Lösung, indem ich dem Dropdown-Menü eine flexible Anzeige gebe
Dieses Snippet funktioniert hervorragend mit
datatable-scroll-wrap
Klasse.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu { display: flex; } .datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a { display: flex; }
quelle
Nun, als ich die oberste Antwort las, sah ich, dass es wirklich nicht funktioniert, wenn Sie die Bildlaufleiste sehen und sich die Umschalttaste in der letzten Spalte (in meinem Fall) oder einer anderen Spalte befindet, die nicht sichtbar ist
Wenn Sie jedoch "erben" in "versteckt" ändern, funktioniert dies.
$('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "overflow", "hidden" ); }).on('hide.bs.dropdown', function () { $('.table-responsive').css( "overflow", "auto" ); })
Versuchen Sie es so.
quelle
Suchen Sie in bootstrap.css nach dem nächsten Code:
.fixed-table-body { overflow-x: auto; overflow-y: auto; height: 100%; }
... und damit aktualisieren:
.fixed-table-body { overflow-x: visible; overflow-y: visible; height: 100%; }
quelle
Verwenden Sie dies einfach
.table-responsive { overflow: inherit; }
Es funktioniert unter Chrome, jedoch nicht unter IE10 oder Edge, da die Eigenschaft erben nicht unterstützt wird
quelle
In meinem Fall funktioniert das gut:
quelle