Table column headers alignment issue

Table column headers alignment issue

cj1005cj1005 Posts: 142Questions: 45Answers: 1

Hi,

I'm having an issue with table column headers not aligning up in certain conditions, it only happens when I have multiple data tables, and it only happens on subsequent tables (i.e. the first table initialised is fine).

Please see my test case below:

https://www.wd4g.com/WCGateway/DTTest.wc

Instructions to find the issue: 1) Click the 'Add' button 2) Click the '2. Select Items' button 3) You should now see the column headers are not aligned correctly.

Could someone please advise what is causing this and how to correct it?

Many thanks, Chris

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948

    It looks like the table shown with the Select Items button is clicked is showing a Datatable that was initialized while hidden. If this is the case then use columns.adjust() after the Datatable is show so Datatables can recalculate the column widths based on the width of the container its in.

    Kevin

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    Thank you, Kevin :smile:

    That worked......well kind of, I had to put it within a setTimeout() like so:

    $('#pills-sjob-tab').on('click', function (e) {
    setTimeout(function(){ sjobxTable.columns.adjust().draw() },500);
    });

    I'm guessing the table is still not visible at the point of clicking the button.

    It would be better if the table was able to set the column size\position on init whether visible or not, as adding extra code each time I want a table to initialize inside a tab seems unnecessary, but it is a working solution.

    Thanks again, Chris

  • kthorngrenkthorngren Posts: 21,315Questions: 26Answers: 4,948
    Answer ✓

    It would be better if the table was able to set the column size\position on init whether visible or not

    The problem is when the table is not visible it has no way of calculating the width of the container it is in.

    I'm guessing the table is still not visible at the point of clicking the button.

    It probably takes a bit of time to display the elements. Try using a timeout of 0. Not sure what you are using to show/hide the tables but if its something like Bootstrap tabs there might be a callback you can use instead. Like this example.

    Kevin

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    This is perfect, as I can set a global function to auto-adjust all table columns headers when within a tab.

    Thank you :smile:

Sign In or Register to comment.