Header Width / ScrollX / Lots of Columns
Header Width / ScrollX / Lots of Columns
![Philipp](https://secure.gravatar.com/avatar/106a920d48448347314645af5370765a/?default=https%3A%2F%2Fvanillicon.com%2F106a920d48448347314645af5370765a_200.png&rating=g&size=120)
Hi there
We encountered a problem with the ScrollX Feature and a large number of columns. At some point, the width of the table header and the main-table are no longer correct.
for testing purposes i just modified the scroll_XY.html example from the datatables-example (sorry for the german headers ;-))
any ideas how to solve this problem?
Philipp
http://img843.imageshack.us/img843/803/17687835.jpg
-------------
[code]
DataTables example
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
$(document).ready(function() {
$('.display').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"
} );
} );
NOT WORKING
Name
Funktion neu
BG
Gesamtbez
We encountered a problem with the ScrollX Feature and a large number of columns. At some point, the width of the table header and the main-table are no longer correct.
for testing purposes i just modified the scroll_XY.html example from the datatables-example (sorry for the german headers ;-))
any ideas how to solve this problem?
Philipp
http://img843.imageshack.us/img843/803/17687835.jpg
-------------
[code]
DataTables example
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
$(document).ready(function() {
$('.display').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"
} );
} );
NOT WORKING
Name
Funktion neu
BG
Gesamtbez
This discussion has been closed.
Replies
I have exactly the same problem as you had. Did you maybe find a solution to fix this?
Allan
I've tried to modify the anonymous functions passed into _fnApplyChildren within the _fnScrollDraw function. My basic approach was to traverse the data structure for each column, find the longest string, create a temporary element with the innerHTML of the cell, call width() on the temp element, and if that calculated with is larger than iWidth, then replace iWidth with the new width of the temp element.
I'm having some issues doing this though. The width of the headers isn't staying consistent with the data.
Feel free to clone the code and help! https://github.com/cliftonswafford/DataTables/commit/531eb942ba14be346592d9e28557f038514ff874
If you just add table.display td { white-space: nowrap; } to datatable.css it fixes this "issue"! ... cue the Feature vs. Bug discussion :)
Allan
In my case; If no scroll configuration is added, some tds would auto wrap and the width is calculated based on the wrapped text. The th is then set with a narrow width.
After adding ScrollX/Y, and as the table is allowed to grow horizontally/vertically, the td is expanded, but the th width is till narrow (from the above width calculation).
I'd say moving the width calculation after applying the scrolling might fix it.
This is just an analysis of the behavior as I still haven't gone through the code.
HTH
So, in the css file ....
table.display td{
min-width: 75px;
}