Table Header not resizing

54696d20

Hey Guys,

http://live.datatables.net/yeqazuze/7 In this example it's showing 2 headers (no sure why). However, on my system. It's showing the top header that doesn't seem to horizontal scroll. If you make the window smaller and scroll right. You'll see it's not fixed on the columns.

Thanks again

kthorngren

Looks like you are missing this column:

{
            data: "TestStudentID"
        },

Here is the updated example:
http://live.datatables.net/godoqesa/1/edit

Kevin

54696d20

Thanks @kthorngren . Unfortunately, I provided the wrong link. Please look at http://live.datatables.net/yeqazuze/9

You'll notice tabs. Click on the Unassigned or Absent tab. You'll noticed that the columns do not line up. You really start to see it when you Horizontal scroll. BUT... the students tab renders fine.

Thanks

kthorngren

Great, thanks for the test case!

There are a couple things. First I'm not familiar with using jQuery tabs so there may be a better way to do this than I show. The first thing to do is use style="width:100%" on all your table tags. This allows Datatables to properly calculate the column widths. However Datatables is unable to calculate these widths for hidden tables. You can use columns.adjust() when the tab becomes visible to fix the column widths.

Here is the updated example. I used an on click handler for the unassigned tab to run columns.adjust().

http://live.datatables.net/tobabovo/1/edit

One last picky thing. In your example you are assigning each Datatable to the same variable table. You might not get the behavior you expect when doing this.

Kevin

54696d20

Thanks @kthorngren . Actually the Table var is me just copy and pasting those. They are actually in separate functions in my current setup. You solution worked in the mock up, but doesn't work in my program

$(document).on('click', '#ui-id-3', function () { console.log("tab 3 click"); $('table#studentsUnassignedTab').DataTable().columns.adjust(); }) $(document).on('click', '#ui-id-4', function () { console.log("tab 4 click"); $('table#studentsAbsentTab').DataTable().columns.adjust(); })

kthorngren

You solution worked in the mock up, but doesn't work in my program

By not working do you mean that your not seeing the console log or the columns.adjust() is not working?

Not sure how to troubleshoot without actually seeing the problem.

Kevin

54696d20

Hey @kthorngren

It's working now.... There was custom CSS from my UI UX dude that was causing the issue.

Thanks again!