Several features misalign horribly when used on initially-hidden tables

john_w

I love DataTables overall. But we keep running into horribly unusable display problems whenever I try to use any type of scroll features, especially with a header using the colspan/rowspan feature. The problem seems to be caused by the scroll features bizarrely splitting the original table's header off into its own table completely separate from the original table body, and then the columns don't line up properly.

We're using DataTables to restyle existing DOM tables and using jQueryUI themeRoller, and have "bJQueryUI": true. But since it can take as long as couple seconds for the whole DOM page to load, and then a bit longer for DataTables to restyle everything, it causes a disturbing FOUC. To avoid that problem, we set the table's style to "display: hidden" in the DOM, then call the jQuery show() method on the table AFTER it has been converted to a DataTable. I discovered through experimenting that if I show the table the whole time, things do line up better (almost accurately).

If you have a better recommendation for how to avoid the FOUC that also fixes the scroll features, I'd love to know. Thanks.

jp_noronha

try to do a ('#your_table').datatable().fnAdjustColumnSizing() before show().
I think you have the same problem as if you were using a tab.

allan

Actually you need to call fnAdjustColumnSizing after the element is made visible rather than before. The reason for this is that when an element is hidden, there is no hight/width available for the elements - so its impossible to do the column alignment calculations. Hence the need for fnAdjustColumnSizing :-)

Allan