当响应和滚动活动时，表格内的下拉按钮出现问题，因为下拉列表由于overflow: auto;属性不可见。我该如何解决这个问题，以便在折叠时显示按钮的下拉选项？我可以使用一些 jQuery，但是在左右滚动出现问题后，我决定找到另一个解决方案。我附上了一张照片以便更好地理解。
由于滚动，响应表内的 Bootstrap 按钮下拉不可见
IT技术
javascript
jquery
css
twitter-bootstrap
overflow
2021-03-03 13:26:55
6个回答
我自己解决了这个问题，并将答案放在范围内以帮助其他有相同问题的用户：我们在引导程序中有一个事件，我们可以使用该事件进行设置，overflow: inherit但是如果您的父级没有 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: 在这个小提琴示例中工作很奇怪，我不确定为什么但在我的项目中工作得很好。
甲CSS唯一解决办法是允许y轴到溢出。
http://www.bootply.com/YvePJTDzI0
.table-responsive {
overflow-y: visible !important;
}
编辑
另一个仅 CSS 的解决方案是根据视口宽度响应地应用溢出：
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: inherit;
}
}
作为参考，现在是 2018 年，我使用的是 BS4.1
尝试添加data-boundary="viewport"到切换下拉列表的按钮（带有 class 的按钮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;
}
}
其它你可能感兴趣的问题