Question

我正在使用带有Bootstrap 3.1.0 css的SlickGrid 2.2。当我尝试调整列标题的大小时，列标题单元格未与正文中的单元格对齐。无论我缩小还是伸展它，标题始终大于身体。我正在使用示例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/

在Bootstrap 2.3.2中，调整大小似乎按预期工作。

我在https://github.com/mleibman/SlickGrid/pull/699注意到有关类似问题的帖子。在那里它似乎表明渲染问题已得到修复，但我相信我的条件，其中项目的大小调整，仍然无法正常工作。

Answer 1

我解决了这个问题，将slickgrid的div放在div中，显示：table样式如下：

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

但在我找到解决方案之前：对于css：

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

用于脚本块：

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

我也在代码末尾用于依赖：

grid1.autosizeColumns();

此外，我发现此问题是在我使用

时

<center> <center>

标记arround div

Answer 2

这很可能是因为bootstrap 3使用box-sizing: border-box。您需要重置.slick-headers及相关的光滑标题/列元素才能使用box-sizing: content-box

另外 - 你提到的拉取请求修复了同样的问题，但它没有在实际的光滑网格代码中被批准/合并。

Answer 3

谢谢，我在Firefox（仅）中遇到问题，其中标题列与网格主体不对齐。这篇文章有助于解决我的问题。我正在使用slick.grid.css，正如之前的帖子所暗示的那样。我补充说：

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

于： .slick-header-columns, .slick-headerrow-columns .slick-header-column.ui-state-default

HTH

调整slickgrid列标题的大小会导致它与body错位

3 个答案: