Answers

• hgabreu Posts: 6Questions: 1Answers: 0

  May 2014

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  May 2014 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  May 2014

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  May 2014

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

  Allan