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

Question

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

我无法理解如何控制它.如果其他任何人也在光滑的网格中遭受了伤害,并且能够为自己辩护,请展开弹药.

在期待中,Premanshu

Answer 1

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

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

.slickgrid网格容器元素的选择器在哪里.

Answer 2

我只能通过应用来启动它在bootstrap 3(一个box-sizing设置的环境border-box)box-sizing: content-box中工作.slick-header-column.

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

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

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

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

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

Answer 3

我在使用twitter bootstrap css的页面上使用它时遇到了类似的问题.解决方案是将框大小覆盖到内容框

*,*:before,*:after {-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; }

可能应该弄清楚究竟哪些类真正需要它,但这对我来说是有条不紊的.

Answer 4

使用 JQuery.show()和.hide().

如果您创建div标签display: none（因此它最初是隐藏的），网格列将无法正确初始化。为了解决这个问题，我创建了 div 标签，visibility: hidden并在使用.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()and但我怀疑如果你不使用 JQuery 直接.show()操作属性，这会起作用。display: none;

希望这可以帮助。