Mam problem z przyciskami rozwijanymi wewnątrz tabel, gdy są responsywne i aktywne, ponieważ lista rozwijana nie jest widoczna z powodu overflow: auto;
właściwości. Jak mogę to naprawić, aby wyświetlić rozwijaną opcję przycisku, gdy ta jest zwinięta? Mogę użyć jQuery, ale po problemach z przewijaniem w lewo-w prawo postanowiłem znaleźć inne rozwiązanie. Załączam zdjęcie, aby lepiej zrozumieć.
źródło
$('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
klasę) są całkowicie ukryte podczas próby ich edycji.Tylko CSS rozwiązaniem jest, aby oś y przepełnienia.
http://www.bootply.com/YvePJTDzI0
EDYTOWAĆ
Innym rozwiązaniem tylko w CSS jest responsywne zastosowanie przepełnienia na podstawie szerokości widocznego obszaru:
@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
źródło
Dla porównania, jest rok 2018 i używam BS4.1
Spróbuj dodać
data-boundary="viewport"
do przycisku, który przełącza menu rozwijane (ten z klasądropdown-toggle
). Zobacz https://getbootstrap.com/docs/4.1/components/dropdowns/#optionsźródło
Zrobiłem inne podejście, odłączyłem element od rodzica i ustawiłem go na pozycję bezwzględną przez jQuery
Działające skrzypce JS: http://jsfiddle.net/s270Lyrd/
Rozwiązanie JS, którego używam.
//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'); } });
źródło
To rozwiązanie zadziałało dla mnie świetnie:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: static !important; } } @media (min-width: 768px) { .table-responsive { overflow: visible; } }
Więcej szczegółów: https://github.com/twbs/bootstrap/issues/15374
źródło
moja szybka globalna poprawka w wysokości 2 centów:
// 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); }) })();
Objaśnienia: Kiedy wyświetlane jest rozwijane menu wewnątrz „.table-responsive”, oblicza on wysokość tabeli i rozwija ją (z dopełnieniem), aby dopasować ją do wysokości wymaganej do wyświetlenia menu. Menu może mieć dowolną wielkość.
W moim przypadku to nie jest tabela, która ma klasę „.table-responsive”, jest to zawijający element div:
<div class="table-responsive" style="overflow:auto;"> <table class="table table-hover table-bordered table-condensed server-sort">
Więc $ table var w skrypcie jest w rzeczywistości div! (żeby było jasne ... albo nie) :)
Uwaga: zawijam go w funkcję, aby moje IDE mogło zwinąć funkcję;), ale nie jest to obowiązkowe!
źródło
Mam rozwiązanie wykorzystujące tylko CSS, po prostu użyj pozycji względnej dla rozwijanych menu wewnątrz tabeli responsywnej:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: relative; /* Sometimes needs !important */ } }
https://codepen.io/leocaseiro/full/rKxmpz/
źródło
Zdefiniuj te właściwości. Powodzenia!
data-toggle="dropdown" data-boundary="window"
źródło
Zostało to naprawione w Bootstrap v4.1 i nowszych poprzez dodanie
data-boundary="viewport"
( Bootstrap Dropdowns Docs )Ale w przypadku wcześniejszych wersji (v4.0 i poniżej) znalazłem ten fragment kodu javascript, który działa idealnie. Działa dla małych tabel i przewijanych tabel:
$('.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': ''}); });
źródło
Trochę wyczyszczono rozwiązanie @Wazime. Świetnie sprawdza się jako rozwiązanie ogólne.
$(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'); });
źródło
Zalecane i wybrane rozwiązanie nie zawsze jest najlepszym rozwiązaniem. Niestety jest to ostatnio używane rozwiązanie, które w serwisie linkedin tworzy wiele pasków przewijania na stronie w zależności od sytuacji.
Moja metoda była nieco inna.
Umieściłem element div odpowiadający tabeli w innym elemencie div. Następnie zastosowałem wysokość 100%, szerokość: 100%, blok wyświetlania i położenie bezwzględne, więc wysokość i szerokość zależą od rozmiaru strony i ustawiłem przepełnienie na ukryte.
Następnie na tabeli responsywnej div dodałem min-height 100%
<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;"> <div class="table-responsive" style="min-height:100%;">
Jak widać na poniższym przykładzie roboczym, bez dodanych pasków przewijania, bez zabawnego zachowania, a praktycznie jako użycie procentów - powinno działać niezależnie od rozmiaru ekranu. Jednak nie testowałem tego. Jeśli z jakiegoś powodu to się nie powiedzie, można zastąpić 100% odpowiednio 100vh i 100vw.
<!-- 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>
źródło
Na podstawie zaakceptowanej odpowiedzi i odpowiedzi @LeoCaseiro oto, co ostatecznie wykorzystałem w moim przypadku:
@media (max-width: 767px) { .table-responsive{ overflow-x: auto; overflow-y: auto; } } @media (min-width: 767px) { .table-responsive{ overflow: inherit !important; /* Sometimes needs !important */ } }
na dużych ekranach lista rozwijana nie będzie ukryta za stołem odpowiadającym, a na małym ekranie będzie ukryta, ale jest w porządku, ponieważ i tak jest pasek przewijania w telefonie komórkowym.
Mam nadzieję, że to komuś pomoże.
źródło
Odpowiedź Burebistaruler działa dla mnie dobrze na ios8 (iphone4s), ale nie działa na Androidzie, który wcześniej działał. To, co mam, co działa dla mnie na iOS8 (iPhone4s) i Andoir, to:
$('.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" ); })
źródło
Może to być przydatne dla kogoś innego. Używam DatatablesJS. Do aktualnej wysokości stołu dodaję 500px. Robię to, ponieważ zbiory danych pozwalają na użycie 10, 20 itd. Stron w tabeli. Muszę więc ręcznie obliczyć wysokość stołu.
Po wyświetleniu listy rozwijanej dodaję dodatkową wysokość.
Gdy lista rozwijana jest ukryta, resetuję oryginalną wysokość stołu.
$(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"); }) })
I HTML
<div class="table-responsive" id="table-responsive-cliente"> <table class="table-striped table-hover"> .... .... </table> </div>
Przed:
Po wyświetleniu listy rozwijanej:
źródło
Rozwiązaliśmy ten problem tutaj, w pracy, stosując klasę .dropup do listy rozwijanej, gdy lista znajduje się blisko dołu tabeli. wprowadź opis obrazu tutaj
źródło
$('table tr:nth-last-child(-n+3) td').addClass('dropup')
.To zadziałało dla mnie w Bootstrap 4, ponieważ ma inne punkty przerwania niż v3:
@media (min-width: 992px) { .table-responsive { overflow: inherit; } }
źródło
O ile ludzie wciąż tkwią w tej kwestii i jesteśmy już w 2020 roku. Otrzymuję czyste rozwiązanie CSS, dając menu rozwijanemu elastyczny wyświetlacz
ten fragment działa świetnie z
datatable-scroll-wrap
klasą.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu { display: flex; } .datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a { display: flex; }
źródło
Cóż, czytając najwyższą odpowiedź, zobaczyłem, że to naprawdę nie działa, gdy widzisz pasek przewijania, a przycisk przełączania był w ostatniej kolumnie (w moim przypadku) lub innej niewidocznej kolumnie
Ale jeśli zmienisz „dziedziczenie” na „ukryte”, to zadziała.
$('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "overflow", "hidden" ); }).on('hide.bs.dropdown', function () { $('.table-responsive').css( "overflow", "auto" ); })
Spróbuj zrobić w ten sposób.
źródło
Wewnątrz pliku bootstrap.css wyszukaj następny kod:
.fixed-table-body { overflow-x: auto; overflow-y: auto; height: 100%; }
... i zaktualizuj za pomocą tego:
.fixed-table-body { overflow-x: visible; overflow-y: visible; height: 100%; }
źródło
Po prostu użyj tego
.table-responsive { overflow: inherit; }
Działa w przeglądarce Chrome, ale nie IE10 ani Edge, ponieważ dziedziczenie nie jest obsługiwane
źródło
W moim przypadku to działa dobrze:
źródło