У меня проблема с раскрывающимися кнопками внутри таблиц, когда они отзывчивы и прокручиваются, потому что раскрывающийся список не отображается из-за overflow: auto;
свойства. Как я могу исправить это, чтобы отображалась раскрывающаяся опция кнопки, когда она свернута? Я могу использовать jQuery, но после того, как у меня возникли проблемы с прокруткой влево-вправо, я решил найти другое решение. Я приложил фото, чтобы лучше понять.
источник
$('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
классом), полностью скрываются при попытке их редактирования.CSS только решение , чтобы ось ординат к переполнению.
http://www.bootply.com/YvePJTDzI0
РЕДАКТИРОВАТЬ
Другое решение, использующее только CSS, - это адаптивное применение переполнения в зависимости от ширины области просмотра:
@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
источник
Для справки, это 2018 год, и я использую BS4.1
Попробуйте добавить
data-boundary="viewport"
к кнопке, которая переключает раскрывающийся список (с классомdropdown-toggle
). См. Https://getbootstrap.com/docs/4.1/components/dropdowns/#optionsисточник
Я использовал другой подход, я отделил элемент от родителя и установил его с абсолютной позицией с помощью jQuery.
Рабочий скрипт JS: http://jsfiddle.net/s270Lyrd/
Я использую JS-решение.
//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'); } });
источник
Это решение отлично сработало для меня:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: static !important; } } @media (min-width: 768px) { .table-responsive { overflow: visible; } }
Подробнее: https://github.com/twbs/bootstrap/issues/15374
источник
мое 2 ¢ быстрое глобальное исправление:
// 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); }) })();
Пояснения: когда отображается раскрывающееся меню внутри «.table-responsive», оно вычисляет высоту таблицы и расширяет ее (с заполнением), чтобы она соответствовала высоте, необходимой для отображения меню. Меню может быть любого размера.
В моем случае это не таблица с классом .table-responsive, это обертка div:
<div class="table-responsive" style="overflow:auto;"> <table class="table table-hover table-bordered table-condensed server-sort">
Итак, $ table var в скрипте на самом деле является div! (для ясности ... или нет) :)
Примечание: я заключаю его в функцию, чтобы моя IDE могла свернуть функцию;) но это не обязательно!
источник
У меня есть решение, использующее только CSS, просто используйте относительную позицию для выпадающих списков внутри таблицы:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: relative; /* Sometimes needs !important */ } }
https://codepen.io/leocaseiro/full/rKxmpz/
источник
Определите эти свойства. Удачи!
data-toggle="dropdown" data-boundary="window"
источник
Это было исправлено в Bootstrap v4.1 и выше путем добавления
data-boundary="viewport"
( Bootstrap Dropdowns Docs )Но для более ранних версий (v4.0 и ниже) я нашел этот фрагмент javascript, который отлично работает. Это работает для небольших таблиц и таблиц с прокруткой:
$('.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': ''}); });
источник
Немного подчистил решение @Wazime. Прекрасно работает как общее решение.
$(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'); });
источник
Рекомендуемое и выбранное решение - не всегда лучшее решение. К сожалению, это недавно использованное решение linkedin, которое создает несколько полос прокрутки на странице в зависимости от ситуации.
Мой метод был немного другим.
Я содержал реагирующий на таблицу div в другом div. Затем я применил высоту 100%, ширину: 100%, блок отображения и абсолютное положение, чтобы высота и ширина основывались на размере страницы, и установил переполнение как скрытое.
Затем в адаптивном div таблицы я добавил минимальную высоту 100%
<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;"> <div class="table-responsive" style="min-height:100%;">
Как вы можете видеть в рабочем примере ниже, без добавленных полос прокрутки, без забавного поведения и практически в виде процентов - он должен работать независимо от размера экрана. Однако я не проверял это на предмет этого. Если по какой-то причине это не удается, можно заменить 100% на 100vh и 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>
источник
Основываясь на принятом ответе и ответе @LeoCaseiro, вот что я в конечном итоге использовал в своем случае:
@media (max-width: 767px) { .table-responsive{ overflow-x: auto; overflow-y: auto; } } @media (min-width: 767px) { .table-responsive{ overflow: inherit !important; /* Sometimes needs !important */ } }
на больших экранах раскрывающийся список не будет скрыт за ответной таблицей, а на маленьком экране он будет скрыт, но это нормально, потому что на мобильном устройстве есть полоса прокрутки.
Надеюсь, это кому-то поможет.
источник
Ответ Burebistaruler работает нормально для меня на ios8 (iphone4s), но не работает на Android, который раньше работал. Что у меня работает на ios8 (iphone4s) и andoir, так это:
$('.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" ); })
источник
Это может быть полезно для кого-то другого. Я использую DatatablesJS. Я добавляю 500 пикселей к текущей высоте таблицы. Я делаю это, потому что Datatables позволяет использовать в таблице 10, 20 и т. Д. Страниц. Поэтому мне нужно динамически рассчитать высоту стола.
Когда отображается раскрывающийся список, я добавляю дополнительную высоту.
Когда раскрывающийся список скрыт, я сбрасываю исходную высоту таблицы.
$(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"); }) })
И HTML
<div class="table-responsive" id="table-responsive-cliente"> <table class="table-striped table-hover"> .... .... </table> </div>
Перед:
После показа раскрывающегося списка:
источник
Мы решили эту проблему здесь, на работе, применив класс .dropup к раскрывающемуся списку, когда раскрывающийся список находится близко к нижней части таблицы. введите описание изображения здесь
источник
$('table tr:nth-last-child(-n+3) td').addClass('dropup')
.Это сработало для меня в Bootstrap 4, поскольку у него другие точки останова, чем в v3:
@media (min-width: 992px) { .table-responsive { overflow: inherit; } }
источник
Пока люди еще застряли в этом вопросе, а мы уже в 2020 году. Я получаю решение на чистом CSS, задав выпадающему меню гибкий дисплей
этот фрагмент отлично работает с
datatable-scroll-wrap
классом.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu { display: flex; } .datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a { display: flex; }
источник
Ну, читая верхний ответ, я увидел, что он действительно не работает, когда вы видите полосу прокрутки, а кнопка переключения была в последнем столбце (в моем случае) или другом столбце, который не отображается
Но если вы измените "наследовать" на "скрытый", это будет работать.
$('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "overflow", "hidden" ); }).on('hide.bs.dropdown', function () { $('.table-responsive').css( "overflow", "auto" ); })
Попробуй сделать так.
источник
Внутри bootstrap.css найдите следующий код:
.fixed-table-body { overflow-x: auto; overflow-y: auto; height: 100%; }
... и обновите это:
.fixed-table-body { overflow-x: visible; overflow-y: visible; height: 100%; }
источник
Просто используйте это
.table-responsive { overflow: inherit; }
Он работает в Chrome, но не в IE10 или Edge, потому что свойство наследования не поддерживается
источник
В моем случае это нормально работает:
источник