Datatable BS4 responsive dynamic resize issue
Datatable BS4 responsive dynamic resize issue
kickbk
Posts: 7Questions: 2Answers: 0
When you dynamically resize the div in which the datatable resides, it does not adjust.
Please see the demo I created on CodePen.
I am using Datatable with BS4 styles which uses the responsive add-on (all resources are added to the codepen).
On the demo, try toggling the sidebar and you will see the issue:
There is just one solution that works - by resizing the datatable with a delay so it kicks in after the css resize:
setTimeout(function() {
var DataTable = $(".dataTable").DataTable();
DataTable.columns.adjust().responsive.recalc();
}, 300);
But that's not elegant, since we have no way to know when the CSS animation will end and the resizing will not be smooth.
Does anyone know or can come up with a better solution? One which will make the DataTable shrink together with the sidebar?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @kickbk ,
Does this SO thread here help? It's showing how to listen for the end of the animation transition - that could make it smoother.
Cheers,
Colin
@colin, I thought of that, but it's not going to improve things much. There must be a way to scale the DataTable as the containing div changes in size. It does so when you grab the browser page and shrink it, so I don't see why it should not be able to do the same when done via a CSS transition. I just don't know how.
Also,
DataTable.columns.adjust().responsive.recalc();is only a partial solution. I notice that I need to run it twice if I want the table to be truly resized, and it gets un-organized when I sort by columns after the resize, which means I would need to run this command twice whenever ANYTHING changes on the datatable. That can't be right. There must be something I am unaware of.So the issue here is that HTML elements to not trigger a resize event when they are resized. The
windowdoes, but not elements (it would be a massive flood of events if they did).I hit exactly that, and describe it and a solution in this blog post. That solution (or rather something like it, I've improved it since then) is going to be built into DataTables v2 so it can respond to resize actions without the window resizing.
Until then, workarounds such as the one you have are needed.
Allan
Perfect. Just what I needed. Thanks @allan