FixedHeader Misalignment

hgabreu

I can't the FixedHeader floating header to align properly.
Here's my test page showing the problem: https://googledrive.com/host/0BxfBwM8xuKeSdUFMQVQyVGlGS2M/

I think this is probably a misconception on my part, I'm not very good with css.
It's also 2px wider, don't know why. Which I could fix it with a "hack", but the headers still do not align.

Thanks for you support.

hgabreu

After many attempts I tried to open FixedHeader own examples and noticed the alignment problem there too. Weird enough it only happens with the floating header, not the floating footer.

To highlight the issue I opened the dev tools and added a 1px solid black border on the table. Here's a screenshot of it. Again, notice that this is the header_footer example, so both are floating.

allan

The problem appears to be coming from the CSS:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

That, I realise, is coming from the DataTables Bootstrap integration file. I suspect that FixedColumns isn't coping with that particular option... I need to look into that. For the moment, try removing those lines in the CSS and see if that helps?

Allan

hgabreu

Thanks for the quick reply Allan.

I copied the integration css file and removed these styles you mentioned. The updated test case is available on the same link

It did help with the 2px problem, but it still was not aligned.

After lots of attempts, I finally made it work when I set up all columns size manually to fit all data (at least all word wraps) and disabled autoWidth. But it still failed if one cell gets a single word that don't fit, forcing it to stretch.

Then I wrote a function that dynamically created classes for all widths setting the max-width to the given width. That along with these custom css for all cells did the trick: overflow: hidden; text-overflow: ellipsis;.

I guess it makes sense that in order to have a always aligned floating header one must predetermine all the column widths.

Thanks.

allan

Heh - I hate column widths... Good to hear you got a solution, and I'll look into this more for FixedHeader.

Allan