fixed header and width in percentage

cool_bombom

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

cool_bombom

also column name (n) becomes wider

allan

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_bombom

Hi Allan

ok. thank u

kind regards
c_bb

cool_bombom

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_bombom

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_bombom

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

allan

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