Issue with % width on parent when using sScrollY = "XXXpx"

johnwc723

Hi,

I have this issue where the column headings width(s) never changing when I set sScrollY to anything. The actual data within the table scales just fine. This will ONLY occur when the parent of the datatable is set to be a relative width to say the document (like "

johnwc723

The below javascript function produces the bug and fixes it. I know that you can "re-draw" the datatable on screen resize using fnAdjustColumnSizing , but this isn't really that feasible when you have lots of datatables on the screen at once (could cause major browser slow-down). After all shouldn't we let the browser worry about drawing the screen whenever possible by using CSS rather than JS. The below code fixes the issue if anyone else encounters it and doesn't require any events to run on-resize.

[code]
function BasicDataTable(tableId) {
return $('#' + tableId).dataTable({
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"sDom": 'lfrtip',
"sScrollY": "200px", //height
"bScrollCollapse": true,
"oLanguage": {
"sInfo": ""//remove "Showing X to Y of Z entries"
},

//HACK ALERT!! for whatever reason datatables doesn't work well with "stretchy" parent elements specifically when "sScrollY" is set, the header gets messed up
//on parent resize. the below fixes this making the table fully stretchable
"fnInitComplete": function () {
var tableWrapper = $('#' + tableId + '_wrapper');


//remove widths that shouldn't be there on the datatable
tableWrapper.css('width', '');
tableWrapper.find('.dataTables_scrollHead').css('width', '');
tableWrapper.find('.dataTables_scrollHeadInner').css('width', '');
tableWrapper.find('.dataTables_scrollHeadInner').find('table').css('width', '');

var tableDataContent = tableWrapper.find('.dataTables_scrollBody')[0];
var tableHasScrollBar = (tableDataContent.scrollHeight > tableDataContent.clientHeight);

//fixes header aligment issues in all major browsers
if (tableHasScrollBar)
tableWrapper.find('.dataTables_scrollHead').css('margin-right', '15px');

//fixes table data stretchyness in

Spankth

Literally have signed up to say a massive thank you. This has solved a big problem of mine, fnAdjustColumnSizing just didn't cut it.

allan

I've added a new feature that will hopefully make this kind of flexible width layout a lot easier in DataTables 1.9 (beta). If you add 'width="100%"' to the table, then it will keep the width flexible. This can be seen here: http://datatables.net/beta/1.9/examples/basic_init/flexible_width.html .

Allan

pwinant

I can't seem to get this to work. I have the DataTables table set to width="100%". The table itself is shrinking and growing correctly when I resize the browser, but the column headers and footers are staying at the original width. Any thoughts? I'm using 1.9. Thanks!

allan

Do you have scrolling enabled? This feature currently will not work with scrolling enabled (well it sort of does, you need to call fnAdjustColumnSizing in a resize event handler).

Allan

cragthehack

is there a fix for this? Doing what you suggest does not work when sScrollY is set.

Edited: nvm. Worked it out using fnAdjustColumnString. But this isn't the best solution when you have multiple tables on a page. But good enough for now.

Thanks for the great work with DataTables. It's much appreciated.

breathment

the "width=...%" attribute for the tag is no longer supported as of HTML 5.0. So I don't see that as a solution for the current version of DataTables?

Regardless, awesome product! And thanks for this fix johnwc723.