Headers Width with Scroller on Postback

Headers Width with Scroller on Postback

jswarrickjswarrick Posts: 5Questions: 0Answers: 0
edited October 2011 in DataTables 1.8
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.

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    not sure. have you called http://www.datatables.net/ref#fnAdjustColumnSizing in the situation where the headers are messed up (after postback)?
  • jswarrickjswarrick Posts: 5Questions: 0Answers: 0
    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.
  • jswarrickjswarrick Posts: 5Questions: 0Answers: 0
    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.
  • jswarrickjswarrick Posts: 5Questions: 0Answers: 0
    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.
  • jswarrickjswarrick Posts: 5Questions: 0Answers: 0
    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.
  • ke4vtwke4vtw Posts: 1Questions: 0Answers: 0
    edited December 2011
    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.
  • MaddyMaddy Posts: 24Questions: 0Answers: 0
    Hello all, did anybody find a solution to this??
This discussion has been closed.