bootstrap4 table-responsive with search panes and buttons

TrilceAC

Hi,

I'm trying to use datatables with bootstrap 4 and search panes with buttons so that the search panes are rendered only after clicking the button.

My table is quite big with some large columns that I am not allowed to hide, and therefore datatables responsive extension is not an option in this case.

As you can see in this example, I am using bootstrap class .table-responsive to make the table responsive with an horizontal scroller. My concern with this approach is that this class has a css rule that sets the overflow of the div as follows: overflow-x: auto; This puts the scroller in the div when it is needed, but it also affect the way that search panes are rendered, not allowing them to be higher than the table even when there is vertical space to render them without the need of the vertical scroll bar. This is just annoying, specially when there are several rows of search panes to render.

Playing with the browser debugger, I have tried to to set both overflow-x: visible and overflow-y: visble with no success, even with !important. It seems that the <div class="table-responsive"> somehow prevents the visibility of the overflowed panes.

Is there any better approach to cope with this this problem? How can I keep the scrollbar of the table without enforcing a fixed height for rendering the search panes? Can the search panes be rendered in modals? If they can, how to do that?

Thanks,
Carlos

sandy

Hi @TrilceAC ,

The best thing to do here is to remove the table-responsive class from the container and set DataTables scrollX config option to true. This allows DataTables to only scroll the table div meaning that SearchPanes operates as before.

I've updated your example slightly to show it working.

Hope this helps,
Sandy

TrilceAC

Hi @sandy ,

Thanks! This works nicely. Sorry for not finding it by myself.

Cheers,
Carlos