我正在使用带有 Bootstrap 3.1.0 css 的 SlickGrid 2.2。当我尝试调整列标题大小时,列标题单元格未与正文中的单元格对齐。无论我是收缩还是拉伸(stretch), header 始终大于主体。我正在使用示例 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 上有一篇关于类似问题的帖子.那里似乎表明渲染问题已解决,但我相信我的情况(调整元素大小)仍然无法正常工作。
最佳答案
我通过将 slickgrid 的 div 放在带有 display:table 样式的 div 中来解决这个问题:
<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;
}
对于脚本 block :
grid1 = new Slick.Grid("#grid1", data, columns, options);
我还在代码末尾使用 for dependency:
grid1.autosizeColumns();
另外我发现这个问题是在我使用的时候
<center> <center>
标签围绕着div
关于javascript - 调整 slickgrid 列标题的大小会导致它与正文不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21540490/