Resize bug when using with jQuery Tabs

Resize bug when using with jQuery Tabs

ud3323ud3323 Posts: 2Questions: 0Answers: 0
edited August 2011 in Bug reports
Dear Allen,

DataTables is great, but I think I've found a bug when using DataTables within a jQuery tab. My basic setup is I have a DataTable within a tab and I have a resize event setup on the window so every time the window is resized fnAdjustColumnSizing() is called.

[code]
var dt = $("#table").dataTable(options);

$(window).bind('resize', function() {
dt.fnAdjustColumnSizing();
});
}
[/code]

This works great at resizing the table if the window gets larger, but when shrinking the window the table keeps it's original width and does not adjust. Can you provide some type of workaround for this weird behavior?

Replies

  • ud3323ud3323 Posts: 2Questions: 0Answers: 0
    edited August 2011
    I have found the culprit. The problem is something to do with sScrollY and how DataTables sets the width of the columns in the table. sScrollY messes everything up. Without it, everything works fine as long as the table has a width of 100%. Don't even need to call fnAdjustColumnSizing();

    So while I'm okay with not having the usage of sScrollY, there is still a bug there that needs to be addressed.
  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin
    I've just been doing some work in this area in DataTables to help tidy things up a bit. It might be worth trying the 1.8.2 development version ( http://datatables.net/download ). What you will get as a warning message on the control now is:

    > The table cannot fit into the current element which will cause column misalignment. The table has been drawn at its minimum possible width.

    Basically, as the message says, when you try to resize the window too small, the columns can't be correctly aligned between the header and the body of the table (since it is really using two different table elements). This looks rubbish, so in order to prevent it, DataTables will refuse to draw the table any smaller. There are a number of options which can help with this:

    1. Set the wrapper around the DataTable to overflow: hidden
    2. Set a min width on the wrapper to not allow it to get too small
    3. Use DataTables 1.8.0 or before which does allow this - but I considered that the bug and fixed it in 1.8.1 (with improvements in 1.8.2.development).

    Allan
This discussion has been closed.