Column Headers not aligned after expanding row.

craig91

I have my datatable setup like below. As you can see it has a fixed height with scrolling when there are enough rows that it is required. My issue is that when no row is expanded there is no scroll Y (veritcal) scroller visible as there aren't enough rows that it is required. Then after expanding the row the scroll bar is then displayed, taking up some space to the right of the table which causes the inner table to become a bit smaller width wise, but the headers do not adjust. I even tried to redraw them in the row expand click event. Let me know if you have any ideas. Thanks in advance!

var table = $('#main_table ').DataTable({
                            "data": orders.data,
              scrollY:        '60vh',
              scrollCollapse: true,
              scrollX: true,
              paging:         false,
                            "columns": [
                                    {
                                            "className": 'details-control',
                                            "orderable": false,
                                            "data": null,
                                            "defaultContent": '',
                                            "render": function () {
                                                    return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                                            },
                                            width:"15px"
                                    },
                                    { "data": "column1" },
                                    { "data": "column2" },
                                    { "data": "column3" },
                                    { "data": "column4" },
                                    { "data": "column5" },
                                    { "data": "column6" }
                            ],
                            "order": [[1, 'desc']],
                    });


                    // Add event listener for opening and closing details
                    $('#main_table tbody').on('click', 'td.details-control', function () {
                            var tr = $(this).closest('tr');
                            var tdi = tr.find("i.fa");
                            var row = table.row(tr);

                            if (row.child.isShown()) {
                                    // This row is already open - close it
                                    row.child.hide();
                                    tr.removeClass('shown');
                                    tdi.first().removeClass('fa-minus-square');
                                    tdi.first().addClass('fa-plus-square');
                            }
                            else {
                                    // Open this row
                                    row.child(format(row.data()),'child').show();
                                    tr.addClass('shown');
                                    tdi.first().removeClass('fa-plus-square');
                                    tdi.first().addClass('fa-minus-square');
                            }

              $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
                    });

colin

Hi @craig91 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

craig91

Sorry about that.

http://live.datatables.net/juxuyopu/1/

Here is an example. Make sure you size the table window so that there is no vertical scroll bar originally, but when you expand the row it is then tall enough so the scrollbar is visible. You should see the columns not align with the headers.

Thanks!

allan

I honestly don't know why calling columns.adjust() isn't working there - I'll dig into that, but as a workaround for the moment, call:

$(window).resize();

instead: http://live.datatables.net/juxuyopu/3/edit

Allan

craig91

Thanks Allan! I did find it odd that resizing the window fixed it but the manual call did not. That's a good work around though, thanks for a solution!