Table Header not resizing

Table Header not resizing

54696d2054696d20 Posts: 75Questions: 18Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    Looks like you are missing this column:

    {
                data: "TestStudentID"
            },
    

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

    Kevin

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    Answer ✓

    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

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    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(); })

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • 54696d2054696d20 Posts: 75Questions: 18Answers: 0

    Hey @kthorngren

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

    Thanks again!

This discussion has been closed.