Column Width Changing with Fixed Header

  • Resolved raftingspot

    (@raftingspot)


    8 years, 7 months ago

    Hello,

    I have my header fixed to the top with the appropriate offset, however, when I scroll down the header and column 4 are shifting to the left.

    This is very obvious if you scroll just below where the header gets fixed and scroll up and down (fixed to not fixed) and you see row 1 all shift left (column 2 gets condensed in the header) and column 4 moves left.

    The only way I have been able to fix this is to make the columns the exact same width, but I don’t want them to be the same width.

    Any help would be appreciated.
    Thank you for your assistance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    I have seen this before, but unfortunately, I haven’t yet been able to find an exact cause for this 🙁
    I do have an assumption however: It seems that your site is showing a loading animation when the page is loaded. Due to how these work (they hide all content at the beginning) this might interfere with the width calculation of the Extension. Can you maybe turn off that loading animation in your theme?

    Maybe you could try an alternative: Instead of fixing the table header row, you could make the table scrollable within a container. For that, please try this Shortcode (without the FixedHeader Extension):

    [table id=1 datatables_scrolly=300px /

    Regards,
    Tobias

    Thread Starter raftingspot

    (@raftingspot)

    8 years, 7 months ago

    Tobias,

    All good, I understand.
    I did the following:
    1) Removed Pre-Loading animation. I had the same issue.
    2) Removed Pre-Loading animation and put in the scrollable container. This worked and I didn’t have shifting problems when moving it.
    3) Put Pre-Loading animation back in with the scrollable container. This still worked properly. This is how it currently is.

    I actually really like the scrollable table better than the fixed header.
    However, my issue now is that the columns in Row 1 seem to be offset to the right compared to the other rows?
    Even if I put in additional CSS to set the width of each column by percentages, they don’t all match up.
    The website currently has no additional CSS in it.

    Let me know your thoughts.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 7 months ago

    Hi,

    this seems to be the same problem, from what I can see 🙁 Something is preventing the DataTables JS library from calculating the correct widths. Unfortunately, I have no idea what it could be 🙁
    Sorry.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Column Width Changing with Fixed Header’ is closed to new replies.