Columns resize in fixed header sort operation

barrett777

Hi Everyone,

I'm trying to set up FixedHeader, but any time the Fixed Header is triggered, or any time I sort a column while Fixed Header is triggered, my columns squish together a little bit.

This doesn't happen if I remove all padding and borders in my headers, but this is of course not ideal.

You can see what I mean here: http://www.hotslogs.com/Sitewide/ScoreResultStatistics?FixedHeader=1

Scroll up and down to trigger the fixed header for the main table. Each time you trigger it, you will see the 'Hero' column get about 5px wider.

What should I be doing differently?

Or is there an event I can monitor for when fixed headers are triggered, so I can manually readjust this?

Thanks,
Ben

allan

Hi Ben,

Thanks for the link and for picking up the DataTables support option!

The issue here is coming from the fact that Bootstrap sets box-sizing: border-box; for all elements, including the table cells. Unfortunately I've found that exceptionally difficult to handle correct in tables (specifically those with the scrolling options enabled) so at the moment DataTables requires that content-box be used for the cell box-sizing.

Adding this to your CSS will address the issue:

table.dataTable td,
table.dataTable th {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

More generally, I would suggest that you include the DataTables integration CSS for Bootstrap. Are the moment you've got a fair amount of DataTables CSS inline, which is fine, but it isn't complete (for example the above is missing).

If you want to then customise it with specific colours etc, then do so, but I would recommend including the integrate CSS as the base from which to work.

Let me know how you get on with that.

Regards,
Allan

barrett777

That did it, thanks! Yeah I know my CSS is a bit of a mess.

I started with a Bootstrap template, and am using Telerik controls on top of it.

Then I decided to use Datatables for client side functionality on the Telerik tables (because Datatables is awesome!)

Telerik is fast for me to implement, but more difficult to customize with CSS, so I've been trying to make minimal CSS changes to get Datatables to work on top of Telerik.

This is perfect though, thanks for your help!