Datatable BS4 responsive dynamic resize issue

Datatable BS4 responsive dynamic resize issue

kickbkkickbk 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:

enter image description here

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();
}, 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


  • colincolin Posts: 7,662Questions: 0Answers: 1,294

    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.



  • kickbkkickbk Posts: 7Questions: 2Answers: 0

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

  • allanallan Posts: 51,260Questions: 1Answers: 7,721 Site admin
    Answer ✓

    So the issue here is that HTML elements to not trigger a resize event when they are resized. The window does, 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.


  • kickbkkickbk Posts: 7Questions: 2Answers: 0

    Perfect. Just what I needed. Thanks @allan

Sign In or Register to comment.