FixedHeader column width not calculating properly with multi column headers

dsteinberg

Here is a minimal example, note the addition of a multi column header: http://live.datatables.net/ladekogo/1

If you expand these rows to take up enough space to add a vertical scrollbar to the page, and scroll down, FixedHeader does not calculate the proper column widths and the column headers resize as a result.

How can I fix this?

I am also having a problem where the fixedheader width is incorrect if the datatable initially takes up less than 100% of the width of the page and a scrollbar is then added, but I've solved that for now by calling table.fixedHeader.adjust() on a fast enough timer that it doesn't really matter to the end user. Is there a correct solution?

Thanks!

dsteinberg

I have just double checked the nightly build and it is still present in there, by the way!

dsteinberg

Update: After a lot of examination and poking around, I have identified the specific nature of the problem.

FixedHeader is not copying the widths of the columns correctly to the header because of the second row - so the columns become equal-width.

My assumption without poking around too much is that it is only copying for the first row, which is why the first row seems aligned.

allan

Hi,

The issue here is that FixedHeader doesn't currently take account of the changes caused by Responsive - so the hidden columns cause the colspan to be potentially incorrect, resulting in bad misalignment.

I'm afraid that FixedHeader and Responsive just don't play nicely together at the moment. Something I plan to fix in future.

Allan

dsteinberg

Hi Allan,

Here is the bug exhibited without Responsive:

http://live.datatables.net/ladekogo/5/edit

So, I believe the bug exists between FixedHeader and complex headers only

David

allan

That example needs the colspan set to 6, but yes, even then, there is a noticeable shift in the columns when it drops into floating mode: http://live.datatables.net/ladekogo/6/edit .

I'm afraid I don't have an immediate fix for it - but I will look into it as soon as I can.

Allan

dsteinberg

Thanks Allan! Probably what I'm going to do until then is build the header myself external to the datatable and copy widths on draw.

zerotime

Quite late to this party... since it seems that FixedHeader is only applying the column widths to the first row of the header; I worked around this issue by creating a row of dummy cells as the first row.

<thead><tr><th>dummy</th></tr><tr><td colspan='1'>complex</td></tr><tr><th>actual column headings</th></tr><thead>

dsteinberg

Zerotime - your fix worked instantly, I just inserted a duplicate empty row above the complex column. Thank you!

zerotime

Good deal

Also, as an aside, if you get silly lag on scroll, offset the table's top margin to -1px, which always displays the FixedHeader.

dmcglynn

THANK YOU @zerotime! Also solved my multi-row header issue.

Wooly65

@dsteinberg can you update your live example with the work around fix?

Nevermind I see: http://live.datatables.net/ladekogo/8/edit

dsteinberg

@Wooly65 http://live.datatables.net/ladekogo/29/

Note the inclusion of this bit right above the actual headers:

<tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
</tr>

As zerotime noted, this will cause Datatables to target this row instead when calculating widths, so it'll work again for complex headers. You can add padding: 0px to get rid of the extra space from the row if that causes you trouble as well.

What's so nice about this solution is you can leave it in place, and if Allan patches this issue you don't have to remove this fix until you want to since it won't break anything.

Wooly65

Looking at the code (dataTables.fixedHeader.js) the _matchWidths function is retrieving all the TH widths appropriately. The code is then assigning the retrieved TH widths to the new element assign the width and minWidth. Not sure why the 2nd row isn't being defined properly. Will play with it over the weekend.

Wooly65

Inspect the floating header and look at the css that has been applied to the table. Uncheck table-layout: fixed;

This doesn't seem to break single line headers. Is this a possibility?

Looks like if you comment out the following code in dataTables.fixedHeader.js line 281
itemDom.floating = $( dt.table().node().cloneNode( false ) )
// .css( 'table-layout', 'fixed' )
.removeAttr( 'id' )
.append( itemElement )
.appendTo( 'body' );

sherman89

Thank you @zerotime for the solution!

For those using the Bootstrap 3 style, this worked for me:

th.dt-invisible-column {
    border: 0 !important;
    padding: 0 !important;
}

Apply that class to every th element in the first row, and it will be visually hidden.

I don't know CSS very well so someone might cringe at that, but it got the job done :-)

sherman89

I forgot to add also that I had to use this style on the first visible row's th (that has the colspan) as well:

th.dt-complex-header {
    border-top-width: 0 !important;
}

Now the invisible row is really invisible, and fixedHeader works!

jzonearcade

@Wooly65
Thank you sir! This fixed the issue for my situation. My setup is skeleton table html,

<table id="data_table" class="table table-striped compact" width="100%"></table>

injecting custom buttons/controls and custom columns search row above and below the standard table header row via jquery.prepend. Everything was working so nicely except for the header column size shift during scroll.

hgsadhrakiya

Thank you @zerotime!!!!!

toniyecla

<style type="text/css">
    .fixedHeader-floating>thead>tr>th {
        display: inline-block !important;
    }
</style>

LePatay

@toniyecla Thanks a lot for this piece of CSS.
Additionnally, if you want to completely hide your empty additional "th" cells, I found that you must use:

.dataTable thead :empty {
    visibility: hidden;
}

instead of:

.dataTable thead {
    empty-cells: hide;
}

... which, strangely, does not work.

Edit: the above was true for 3.1.5, but I can't seem to make "empty-cells: hide" work at all for 3.1.6. Fiddle

LePatay

(Sorry for the double posting)
The pure CSS solution provided by @toniyecla solves the issue, but breaks multi-line th: http://jsfiddle.net/numL63c8/2/

@Wooly65's solution is the best and simplest one, in my opinion:

itemDom.floating = $(dt.table().node().cloneNode(false))
     /* Comment this
     .css('table-layout', 'fixed')
     */
     .attr('aria-hidden', 'true')

@allan, are you planning to remove this line in an upcoming release?

allan

I wasn't at the moment because its used to force the fixed table to align with the main table. I need to look into proper multi-row support in the header / footer in FixedHeader for this I think.

Allan