admin 管理员组

文章数量: 1086019

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);
 })

/

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

I have noticed a post about a similar issue at . 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.

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/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./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.

  • javascript
  • css
  • twitter-bootstrap
  • slickgrid
Share Improve this question asked Feb 4, 2014 at 0:08 user3267934user3267934 131 silver badge4 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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

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.

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

本文标签： javascriptresizing a slickgrid column header causes it to be misaligned with bodyStack Overflow

版权声明：本文标题：javascript - resizing a slickgrid column header causes it to be misaligned with body - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744056972a2526028.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。