光滑的网格标题行单元格对齐答案

【问题标题】：slick grid header row cell alignment光滑的网格标题行单元格对齐
【发布时间】：2012-01-23 11:23:12
【问题描述】：

我正在使用光滑的网格在网格中显示数据。当创建特定的网格并且网格看起来非常好时，Slick 网格会计算所有的东西，比如高度、宽度。当网格被创建但被隐藏并且在其他操作（复选框/单选按钮选择）时网格变得可见时，问题就出现了。这次计算出错了，标题和行单元格（标题的列）没有垂直对齐。

我无法理解如何控制它。如果还有其他人也曾在光滑的网格中受苦并能够自卫，请拿出弹药。

在期待中，普雷曼舒

【问题讨论】：

标签： javascript css slickgrid

【解决方案1】：

这些解决方案都不适合我，可能是因为自 2012 年以来 SlickGrid 的代码发生了变化 :) 我在这个post 中找到了一个解决方案，它与@Wex 的类似，但差别很小：

.slickgrid, 
.slickgrid *,
.slick-header-column {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

其中.slickgrid 是网格容器元素的选择器。

【讨论】：

【解决方案2】：

只需将box-sizing: content-box 应用于.slick-header-column，我就可以让它在引导程序3（box-sizing 设置为border-box 的环境）中工作。

.slick-header > .slick-header-columns > .slick-header-column {
  -webkit-box-sizing: content-box;                                                              
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

修改.slick-header-column 的border 属性时要小心。通过将颜色设置为transparent，我能够删除右侧的边框：

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
  border-right-color: transparent;
}

注意：您可以使用选择器的特殊性 - 您要覆盖的选择器是：

.slick-header-column.ui-state-default { ... }

【讨论】：

【解决方案3】：

在带有 twitter bootstrap css 的页面上使用它时，我遇到了类似的问题。解决方案是将 box-sizing 覆盖为 content-box

*, *:之前, *:之后 { -webkit-box-sizing：内容框； -moz-box-sizing：内容框； box-sizing：内容框； }

可能应该弄清楚哪些类真正需要它，但这对我来说是排序的。

【讨论】：

最好只覆盖 .grid 的子元素，否则会影响 Bootstrap，它希望处理边框大小。例如。 .grid *, .grid:before *, .grid:after * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

【解决方案4】：

我在使用 JQuery .show() 和 .hide() 动态显示/隐藏网格时遇到了类似的问题。

如果您使用display: none 创建div 标记（因此它最初是隐藏的）网格列不会正确初始化。为了解决这个问题，我使用 visibility: hidden 创建了 div 标签，并在使用 .hide() 和 .show() 方法之前删除了这个样式。

我的代码大致如下：

  <div id="mygrid" style="visibility: hidden"></div>

  $grid = $("#mygrid")

  grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);

  // Hide grid by default, remembering to remove the visibility style
  $grid.hide();
  $grid.css("visibility", "visible");

  // You can now show and hide the grid using normal jQuery methods
  $grid.show();
  $grid.hide();

一旦它被初始化并删除了visibility: hidden; 属性，我将使用.hide() 和.show()，但我怀疑如果你不使用JQuery 直接操作display: none; 属性，这将起作用。

希望这会有所帮助。

【讨论】：

@njr..感谢您的回复...但不知何故，这种解决方法似乎不足以解决问题。 ![问题中的图片](C:\Users\premanshu\Desktop\slick alignment1 是我在使用您的回复后得到的。
我还在标题中添加了一些自定义类，这似乎是这种错误对齐的原因。我用你的在 jsfiddle 中尝试了一个，它工作正常。 jsfiddle.net/wLPLA/13
在您的 jsFiddle 中，您在 HTML 标记中使用 display:none 定义了网格。尝试改用visibility: hidden
更新后的小提琴是 jsfiddle.net/wLPLA/18 但它给了我相同的结果
是的，使用自定义类很可能是相关的，特别是如果您编辑了标准样式表。我建议的答案仅基于解决我的问题的解决方案。我的建议是从标准开始，一个一个地添加你的类，直到它中断。如果@Tin 说这应该可行，那么我相信他——毕竟是他写的。

【解决方案5】：

我遇到了完全相同的问题，在阅读了@Premanshu 和@Tin 的答案后，我找到了解决它的不同途径。

基本上，您需要跳过一个事件循环并让 DOM 在显示网格之前赶上，这将允许它找到正确的列宽。我用 setTimeout 来做。

    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
    grid = new Slick.Grid(myGrid, data, columns, options);


   // ... later on, append the container to the DOM and initialize SlickGrid
   setTimeout(function(){
     myGrid.appendTo(that.$el);
     grid.init();
   },1);

【讨论】：

【解决方案6】：

这是受支持的，不应发生。事实上，大多数示例（包括http://mleibman.github.com/SlickGrid/examples/example1-simple.html）都具有相同的实现，只是为了确保它正常工作。

你能包含一个 jsfiddle.net 复制品吗？

【讨论】：

如果网格已初始化并在页面加载时可见，则它可以正常工作。但是，如果网格已初始化并且在页面加载时不可见，它就不是好方法。
1.4.2 版是否支持此功能？我使用该版本作为基线，并且在它之上存在我的自定义。
不记得什么时候改的了。

【解决方案7】：

帮我解决了。这就是我正在做的事情： 1.初始化网格 2. 追加数据 3. 使用包含网格的div的模态呈现它

为了解决我这样做： 1.使用包含网格的div的模态呈现 2.初始化网格 3. 追加数据

【讨论】：