Question

88

Bootstrap button drop-down inside responsive table not visible because of scroll

rated 0 times [ 89] [ 1] / answers: 1 / hits: 149630 / 10 Years ago, wed, september 24, 2014, 12:00:00

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. enter

Here is a small js fiddle:

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myrap

Add To Favorites

Follow

Total Points: 407

Total Questions: 105

Total Answers: 109

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

myrap questions

1 How To Convert base64 String to PDF in React.js

Tue, Feb 8, 22, 00:00, 2 Years ago

1 Migrating away from Typescript in a React project

Wed, Jan 15, 20, 00:00, 4 Years ago

1 Can I use let in react function component?

Thu, Oct 24, 19, 00:00, 5 Years ago

1 Delay inside/after subscribe in angular

Thu, Oct 3, 19, 00:00, 5 Years ago

1 To pin the caption of the scrollable table

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 10 Years ago monicag · Accepted Answer

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" );

})

and this is the fiddle

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