Data table using scrollY inside jQuery UI modal dialog misaligns header columns on load

Bob Rodes

I'm sorry, I can't see how to recreate this on jsFiddle or DataTables live, since the problem involves loading a local file for the modal dialog. Hopefully, I've gotten far enough that we can dispense with that. If not, I'd appreciate some suggestions about how to recreate the problem on one of those sites.

Again, I'm using some mods of one of Allan's examples, the one to show child data rows when you click a button.

I have this data table:

            var theData = { "data": <?php echo $rs; ?> } 

            var table = $('#example2').DataTable( {
                "data": theData.data,
                "columns": [
                    {
                        "className":      'details-control',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    { "data": "ID" },
                    { "data": "CAGE" },
                    { "data": "Name" }
                ],
                "order": [[1, 'asc']],
                paginate: false,
                scrollY: '375px',
                scrollCollapse: true,
            } );

This is in a file called test3.php. I load this data as a jQuery UI modal dialog, so:

        $("#test").on('click', function(e) {
            $("#dialog").load('test3.php', function() {
                $("#dialog").dialog({
                    modal: true,
                    width: '600px',
                    position: {my:'top', at:'top+80'}
                });
            });
        });

The table has the body sized correctly, but all the header columns are sized at the minimum width to accommodate the titles (in Chrome, in Opera the columns are much wider than the modal window). Clicking on a sort causes the headers to size properly. Interestingly, opening the developer tools window does the same, in both Chrome and Opera.

Digging down through the divs, I see that some extra divs are created during the rendering process to support scrolling, which explains why the problem only happens if I apply the scrollY option. .dataTables_scrollHeadInner and the table.dataTable element it contains both have a width of the familiar 100px, which as I recall from other battles with tabs that are invisible when the page is loading is the width used when a drawing function doesn't know the width of the context in which it's drawing. (In Opera, the width is set at 1424px, which is the screen width of my machine.)

If I open test3.php directly (not as a modal window, after including all the HTML header files), all the table headers are sized correctly.

It seemed a likely conclusion that when dialog is loading the table, it isn't visible, so the draw function doesn't know the width. I thought I might redraw the table after the dialog was done dialogging: $('#example2).DataTables().columns.adjust().draw();, but that doesn't seem to have any effect. I've also tried putting in a drawCallBack but unsurprisingly, it redraws and recursively calls itself in an endless loop.

I'm sure I could hard code the column widths, but is there a place in the process that I might successfully redraw the table once we can see the width it's working with?

TIA

Bob Rodes

I solved it. Redrawing in the dialog's open event is the solution, which makes sense since that's when the dialog becomes visible. What's strange to me is that it doesn't work to just redraw it right after calling the dialog() event, rather than having to put it in the open event for the dialog. Anyway, that seems where I went wrong.

allan

You probably need to call colums.adjust() when the table is shown as visible in the document. jQuery UI's dialogue control has a shown event that you can use for that (sorry for not giving a link to the jQuery UI docs - on a train and it's not easy on a phone :-) ).

You could try calling that method directly in the browsers console when that table is visible to make sure that it will work. If it doesn't, I'd need a link to the page.

Allan

Bob Rodes

I wish we had more trains in the US! I miss them. As it turned out, this was the solution, which I found a few minutes before you posted. (I'd better state that it's the open event rather than the shown event so as not to confuse anyone else reading this.)

As I had it, I called columns.adjust().draw() rather than just columns.adjust(). I was running a line of reasoning from the fact that clicking a sort column was fixing the columns (as it would want to when new page data of different cell widths came up), but it didn't occur to me that re-sorting only needs to do a column adjust rather than a complete redraw. So, I fixed that. Thanks Allan. I'd say that the 32,971 posts you've made to date to support your work is pretty unusual in our profession. :)