fixed header and width in percentage

fixed header and width in percentage

cool_bombomcool_bombom Posts: 17Questions: 4Answers: 0

Hi Allan

There seems to be an issue with fixedheaders when using width in %, when one wishes the column to auto fit to the content.

example: https://codepen.io/coolbombom/pen/BarMjKP

see the email header when scrolling

do you think you can fix this or is the solution to use fixed widths?

kind regards
c_bb

This question has an accepted answers - jump to answer

Answers

  • cool_bombomcool_bombom Posts: 17Questions: 4Answers: 0

    also column name (n) becomes wider

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin
    Answer ✓

    The problem is that the content can't fit into just 1% width, so while DataTables tries to make the column as small as possible, the browser refuses to make it smaller than the smallest possible for the content. But with the fixed header, it doesn't have the same content, so it is different, hence the issue.

    Best way is just to let DataTables sort the widths out for you. If you need the column to be more narrow than the content in it, put a div in the cell around the content and use CSS to force the width of the div, which is a lot more biddable than a table cell!

    Allan

  • cool_bombomcool_bombom Posts: 17Questions: 4Answers: 0

    Hi Allan

    ok. thank u

    kind regards
    c_bb

  • cool_bombomcool_bombom Posts: 17Questions: 4Answers: 0

    Hi Allan

    After working with your solution, i still have problems. It looks like the fixed header matches the datatable original columns width, but I'm getting data via Ajax, which result in that all columns width changes to match data. but the fixed-header seems to matches the original initiated widths.

    hope it makes sense

    kind regards
    c_bb

  • cool_bombomcool_bombom Posts: 17Questions: 4Answers: 0

    Hi Allan

    I finally figured out my problem.

    I have a column that is d-none (display:none) when on larger devices and then it is the only column shown on mobile.

    had this column as the second in the table which the fixed-headers could not figure out. I then moved it to the end as the last th, and fixed-headers now works.

    but maby it is a considerable fix for upcoming versions?

    kind regards
    c_bb

  • cool_bombomcool_bombom Posts: 17Questions: 4Answers: 0

    Hi Allan

    The also seems to be something width headerOffset on fixedheaders.

    as i resize my browser window, my nav bar also resizes in height, which result in that the fixedHeader.headerOffset that the datatable is initiated with is not correct anymore.

    tried to set headerOffset to be a function, but that does not seem to work.

    kind regards
    c_bb

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    Are you doing the hidden column manually or with DataTables (columns.visible or columns().visible(), or perhaps with our Responsive extension)?

    They should all work correctly with FixedHeader.

    I'm not seeing the error you mention about headerOffset not being a function in my demos. Can you link to a page showing the issue please?

    Allan

Sign In or Register to comment.