由于滚动，响应表内的 Bootstrap 按钮下拉不可见 [英] Bootstrap button drop-down inside responsive table not visible because of scroll

问题描述

我在响应和滚动活动时表格内的下拉按钮有问题，因为下拉不可见，因为 overflow: auto; 属性.我该如何解决这个问题，以便在折叠时显示按钮的下拉选项?我可以使用一些 jQuery，但是在左右滚动出现问题后，我决定找到另一个解决方案.我附上了一张照片以便更好地理解.

I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of overflow: auto; property. How can I fix that in order to show drop-down option of button when this is collapsed? I can use some jQuery but after I have problems with scroll left-right so I decided to find another solution. I have attached a photo to understand better.

这是一个小 js 小提琴:

推荐答案

我自己解决了这个问题，我把答案放在范围内以帮助其他有同样问题的用户:我们在引导程序中有一个事件，我们可以使用该事件来设置 overflow: inherit 但如果您的父容器上没有 css 属性，这将起作用.

I solved myself this and I put the answer in scope to help other user that have same problem: We have an event in bootstrap and we can use that event to set overflow: inherit but this will work if you don't have the css property on your parent container.

$('.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: 在这个小提琴示例中工作很奇怪，我不确定为什么但在我的项目中工作得很好.

info: In this fiddle example works strange and I'm not sure why but in my project works just fine.

这篇关于由于滚动，响应表内的 Bootstrap 按钮下拉不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！