调整slickgrid列标题的大小导致其与主体不对齐 [英] resizing a slickgrid column header causes it to be misaligned with body

问题描述

我使用SlickGrid 2.2与Bootstrap 3.1.0 css。当我尝试调整列标题时，列标题单元格不与主体中的单元格对齐。标题始终大于身体，无论我是收缩还是伸展它。我使用的示例1代码：

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

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中，调整大小似乎按预期工作。

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

我注意到有关类似问题的帖子 https://github.com/mleibman/SlickGrid/pull/699 。这似乎表明渲染问题已修复，但我相信我的条件，项目的大小，仍然不工作。

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.

推荐答案

我是通过将slickgrid的div放在div中与display：table样式来解决这个问题：

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>

但在找到解决方案之前：
for css：

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

脚本块：

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> 

标记arround div

tags arround div

这篇关于调整slickgrid列标题的大小导致其与主体不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！