fixed header and width in percentage
fixed header and width in percentage
cool_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
also column name (n) becomes wider
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 thediv
, which is a lot more biddable than a table cell!Allan
Hi Allan
ok. thank u
kind regards
c_bb
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
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
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
Are you doing the hidden column manually or with DataTables (
columns.visible
orcolumns().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