Headers Width with Scroller on Postback

jswarrick

Hi guys, I've got an issue with my datatable. I was asked to use a scroll bar, so that the users can see the header at all times. Using the scroller feature I was able to do exactly what the users wanted.

Here's my problem:
On postback, any postback, from within the page, my headers get messed up. They're all squished together about as tight as can be. But, if I click anywhere on the header or search or filter, the header immediately corrects itself.

Here is my code:

[code]
var oTable = $('#tbHistory').dataTable({
"sScrollY": 400,
"bDeferRender": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bStateSave": true,
"aaSorting": [[9, "asc"]],
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
{ "bSortable": false },
null
],
"oLanguage": {
"sLengthMenu": 'Display ' +
'10' +
'20' +
'50' +
'100' +
' records'
},
"iDisplayLength": 20
});
[/code]

Am I doing anything blatantly wrong? I've searched quite a bit to no avail. Any help here would be greatly appreciated.

fbas

not sure. have you called http://www.datatables.net/ref#fnAdjustColumnSizing in the situation where the headers are messed up (after postback)?

jswarrick

I just tried that, no luck. I'm not sure what's causing it. I have not had this problem at all until I instituted the scroller feature.

Funnily enough, if I bind that feature to the windows resize (per the example), it works... when I resize the window. If I just put the code under document.ready, it doesn't work.

jswarrick

What I have found is the "computed" width is different than what the actual width *should* be. I'm not sure what's causing this.

jswarrick

This is what I'm getting on my header as far as computed style:

[code]
width: 483px;
element.style - 887px
[/code]

My question is, how can I get it to stop rendering it as 483px on postback. Again, it fixes itself as soon as I click anywhere on the header. I'm completely stumped.

jswarrick

OK, messing with the table, may have fixed my issue. Adding a table-layout:fixed style to it *seems* to have fixed it... for the most part. It's still off by 18pixes when I look at the computed layout. But, in the absence of an actual solution, this may have to do.

ke4vtw

jswarrick,

Did you ever find a fix for this? I'm having exactly the same issue, but the table-layout:fixed option makes mine worse!

In my case, the #dataTables_scrollHeadInner div has a [code]style="width: 117px;"[/code] attribute immediately after PostBack. After I click on the header, it changes instantly to [code]style="width: 739px;"[/code].

I've tried adding [code]$("#dataTables_scrollHeadInner").width("739px;");[/code] after I create the datatable, but it has no impact at all.

Maddy

Hello all, did anybody find a solution to this??