resizing a slickgrid column header causes it to be misaligned with body

Question

I am using SlickGrid 2.2 with Bootstrap 3.1.0 css. When I try to resize the column header, the column header cell is not aligned with the cell in the body. The header is consistently larger than the body whether I am shrinking or stretching it. I am using the code from example 1:

html

<div id="myGrid" style="width:600px;height:500px;">

javascript

 var grid;
 var columns = [{
     id: "title",
     name: "Title",
     field: "title"
 }];

 var options = {
     enableCellNavigation: true,
     enableColumnReorder: false
 };

 $(function () {
     var data = [];
         data[0] = {
             title: "Task ",
             duration: "5 days",
             percentComplete: Math.round(Math.random() * 100),
             start: "01/01/2009",
             finish: "01/05/2009",
             effortDriven: 10
         };

     grid = new Slick.Grid("#myGrid", data, columns, options);
 })

http://jsfiddle.net/stryecho/n58Cq/7/

In Bootstrap 2.3.2, the resizing seems to work as expected.

I have noticed a post about a similar issue at https://github.com/mleibman/SlickGrid/pull/699. There it seems to indicate that a rendering issue was fixed, however I believe my condition, where the item is resized, is still not working.

Answer 1

I was solve this problem by putting slickgrid's div in div with display:table style like this:

<div style="display:table;">
    <div id="grid1"></div>
</div>

But before I found solutions: for css:

[class^="slickgrid_"],
[class^="slickgrid_"] div {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
     box-sizing: content-box !important;
}

for script block:

grid1 = new Slick.Grid("#grid1", data, columns, options);

and also I use for dependency at end of code:

grid1.autosizeColumns();

Also I found that this issue is when I use

<center> <center> 

tags arround div

Answer 2

It's most likely because bootstrap 3 uses box-sizing: border-box. You'll need to reset the .slick-headers and related slick header/column elements to use box-sizing: content-box

Also - the pull request you mentioned fixes the same issue but it has not been approved/merged in the actual slick grid code.

Answer 3

Thanks, I was also having issues in Firefox (only) where the header columns where misaligned with the body of the grid. This post helped resolved my issue. I'm using slick.grid.css , and as the previous post suggests. I added:

   -moz-box-sizing: border-box;
   box-sizing: border-box;

to: .slick-header-columns, .slick-headerrow-columns .slick-header-column.ui-state-default

HTH