Responsive datatables in collapsing containers

larsonator

I have found some kind of issue when a data table is created inside a collapsed container, in that is does not inherit any responsive properties.

i have included an jsFiddle and DataTables live example.

http://jsfiddle.net/5xB6H/2/

http://live.datatables.net/saqijiw/1/watch

Table one works fine, how ever table two will stretch outside of its container on a small display.

Does anyone know a way around this?

larsonator

Opps, jsfiddle not correct, here is a correct link

http://jsfiddle.net/5xB6H/3/

larsonator

Using the draw, and columns.adjust API doesnt seem to remedy the issue either :(

Bootstrap has an event which fires after the container is visible. Calling them on this event doesn't work.

I places a button in the hidden container and attached a click listners on it to redraw the table, this does not work either.

http://jsfiddle.net/5xB6H/5/

allan

I think the problem here is that the Responsive plug-in hasn't been able to calculate the column widths since the second table is hidden. It is probably going to need an API method added to provide that ability.

I'll try to look into adding it when I can.

Allan

larsonator

You beauty.

For now, i have found a work around, by destroying the table, and re-initializing it. Though it would be nicer to simply be able to calculate the widths again.

Thanks Allan

allan

Good to hear that workaround does the business, and it confirms my suspicions. There are one or two other bugs in Responsive that I want to address as well, so I'll try to get this done some time soon.

Allan

allan

New API has been added in this commit.

I'll be releasing this shortly.

Allan

larsonator

Alan, you sir are a legend!

For those who wanted a live working example of the fix, have a look at this fiddle. (uses bootstrap, as long as you can catch the event when the section is shown you are fine.
http://jsfiddle.net/5xB6H/9/

Vadorequest

I found a-nother- workaround to this.
The issue is that if the table is hidden when it's initialized then it won't be displayed correctly. The trick is to hide the table using JS instead of CSS, because JS is applied once the page is loaded using $(function(){});. So if you init the table before to hide it by JS when it will be showed then it will be correctly displayed. The order matters!