引导按钮下拉列表响应表由于滚动不可见 [英] 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小提琴：

Here is a small js fiddle:

推荐答案

我解决了这个问题，我把答案范围内帮助其他用户有同样的问题：在引导程序中，我们可以使用该事件来设置 overflow：inherited ，但如果您的父容器上没有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: inherited but this will work if you don't have 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" );
})

这是小提琴

and this is the fiddle

info： 在这个小提琴的例子工作奇怪，我不知道为什么，但在我的项目工作很好。

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

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