У меня проблема с раскрывающимися кнопками внутри таблиц, когда они реагируют и прокручиваются, потому что раскрывающийся список не отображается из-за свойства overflow: auto;. Как я могу исправить это, чтобы показать раскрывающуюся кнопку кнопки, когда она рухнула? Я могу использовать некоторые jQuery, но после того, как у меня возникли проблемы с прокруткой влево-вправо, я решил найти другое решение.
Я прикрепил фотографию, чтобы лучше понять. 
Выпадающая кнопка Bootstrap внутри чувствительной таблицы не видна из-за прокрутки
Ответ 1
Я решил это, и я поместил ответ в область действия, чтобы помочь другому пользователю, имеющему такую же проблему: у нас есть событие в bootstrap, и мы можем использовать это событие для установки overflow: inherited, но это будет работать, если у вас нет css в вашем родительском контейнере.
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "inherit" );
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})
info: В этом примере скрипта работает странно, и я не уверен, почему, но в моем проекте работает нормально.
Ответ 2
CSS only решение только для CSS позволяет переполнить ось Y.
http://www.bootply.com/YvePJTDzI0
.table-responsive {
overflow-y: visible !important;
}
EDIT
Другое решение только для CSS - быстро применить переполнение в зависимости от ширины области просмотра:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: inherit;
}
}
Ответ 3
Я бы выбрал другой подход, я отсоединил элемент от родителя и установил его абсолютной позицией с помощью jQuery
Рабочая JS Fidle: 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');
}
});
Ответ 4
Это решение отлично сработало для меня:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: visible;
}
}
Ответ 5
У меня есть решение, использующее только CSS, просто используйте относительное положение для выпадающих меню внутри таблицы:
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: relative; /* Sometimes needs !important */
}
}
Ответ 6
Для справки, это 2018 и я использую BS4.1
Попробуйте добавить data-boundary="viewport" к кнопке, которая переключает выпадающий список (тот, что с классом dropdown-toggle). Видеть https://getbootstrap.com/docs/4.1/components/dropdowns/#options
Ответ 7
мое 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-отзывчивого", оно вычисляет высоту таблицы и расширяет ее (с заполнением) в соответствии с высотой, необходимой для отображения меню. Меню может быть любого размера.
В моем случае это не та таблица с классом ".table-responsive", это wrapping div:
<div class="table-responsive" style="overflow:auto;">
<table class="table table-hover table-bordered table-condensed server-sort">
Итак, $table var в script на самом деле является div! (просто чтобы быть ясным... или нет):)
Примечание. Я переношу его в функцию, поэтому моя IDE может свернуть функцию;) но это не обязательно!
Ответ 8
Определите это свойства. Удачи!
data-toggle="dropdown" data-boundary="window"
Ответ 9
Рекомендуемое и выбранное решение - не всегда лучшее решение. К сожалению, его решение связано недавно, и на странице создается множество полос прокрутки на основе ситуации.
Мой метод несколько отличался.
Я содержал табличный отзыв 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>Ответ 10
Немного убрал решение @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');
});
Ответ 11
Ну, единственный способ исправить это - использовать overflow:auto, чтобы изменить его с overflow-y: hidden;
live DEMO
.table-responsive {
border: 1px solid #ddd;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: auto;
width: 100%;
}
или
.table-responsive {
border: 1px solid #ddd;
margin-bottom: 15px;
overflow: auto;
width: 100%;
}
Ответ 12
Основываясь на принятом ответе и ответе @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 */
}
}
на больших экранах выпадающее меню не будет скрыто за рецензирующей таблицей, а на маленьком экране оно будет скрыто, но это нормально, потому что в любом случае есть полоса прокрутки на мобильном телефоне.
Надеюсь, что это поможет кому-то.
Ответ 13
Ответ Burebistaruler работает нормально для меня на ios8 (iphone4s), но doen't woks на андроиде, который раньше работал. Что я донн, который работает для меня на 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" );
})
Ответ 14
Просто используйте это
.table-responsive {
overflow: inherit;
}
Он работает на Chrome, но не на IE10 или Edge, потому что свойство inherit не поддерживается
Ответ 15
Это может быть полезно для кого-то другого. Я использую DatatablesJS. Я добавляю 500px к текущей высоте таблицы. Я делаю это, потому что Datatables позволяет вам использовать 10, 20 и т.д. В вашей таблице. Поэтому мне нужно рассчитать динамическую высоту стола.
Когда выпадающее меню показано, я добавляю дополнительную высоту.
Когда выпадающее меню скрыто, я reset высота оригинальной таблицы.
$(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>
До:
После выпадающего меню показано:
Ответ 16
Мы решили эту проблему здесь, на работе, применяя класс .dropup к раскрывающемуся списку, когда раскрывающийся список находится близко к нижней части таблицы.введите описание изображения здесь
Ответ 17
Это сработало для меня в Bootstrap 4, поскольку оно имеет точки останова, отличные от v3:
@media (min-width: 992px) {
.table-responsive {
overflow: inherit;
}
}
Ответ 18
Внутри bootstrap.css найдите следующий код:
.fixed-table-body {
overflow-x: auto;
overflow-y: auto;
height: 100%;
}
... и обновите с помощью этого:
.fixed-table-body {
overflow-x: visible;
overflow-y: visible;
height: 100%;
}
Ответ 19
В моем случае это работает нормально:
.table-responsive {
overflow-y: visible !important;
}