slick grid header row cell alignment

Question

I'm using a slick grid to display data in grid. Slick grid calculates all the stuff like height, width when that particular grid is created and the grid looks really fine. The trouble foments when the grid is created but is hidden and on action of something else (checkbox/radio button select) the grid becomes visible. this time the calculation goes awry and the headers and row cells (column for the header) are not aligned vertically..

I m unable to understand how to control this. If anyone else too has suffered at the hands of the slick grid and have been able to defend themselves please bare the ammunitions.

In anticipation, Premanshu

Answer 1

None of these solutions worked for me, may be because SlickGrid's code changed since 2012 :) I found a solution in this post, it's similar to @Wex's, but with tiny differences:

.slickgrid, 
.slickgrid *,
.slick-header-column {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

Where .slickgrid is a selector of a grid container element.

Answer 2

I was able to get this to work in bootstrap 3 (an environment where box-sizing is set to border-box) just by applying box-sizing: content-box to the .slick-header-column.

.slick-header > .slick-header-columns > .slick-header-column {
  -webkit-box-sizing: content-box;                                                              
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

---

Just be careful when modifying the border properties of .slick-header-column. I was able to remove the border on the right by setting the color to transparent:

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
  border-right-color: transparent;
}

Note: You can play around with the selector specificity - the selector you're overwriting is:

.slick-header-column.ui-state-default { ... }