Выравнивание ячейки строки заголовка сетки

Я использую slick grid для отображения данных в сетке. Слайковая сетка вычисляет все вещи, такие как высота, ширина, когда создается определенная сетка, и сетка выглядит очень хорошо. Проблема возникает при создании сетки, но она скрыта и при действии чего-то еще (флажок/переключатель выбора) сетка становится видимой. на этот раз расчет идет наперекосяк, а заголовки и ячейки строк (столбец для заголовка) не выровнены по вертикали. enter image description here

Я не могу понять, как это контролировать. Если кто-то еще пострадал от рук пятна сетки и смог защитить себя, пожалуйста, обнажите боеприпасы.

В ожидании, Premanshu

ОТВЕТЫ

Ответ 1

Ни один из этих решений не работал у меня, может быть, потому что код SlickGrid изменился с 2012 года:) Я нашел решение в этом post, это похоже на @Wex's, но с небольшими отличиями:

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

Где .slickgrid - это селектор элемента контейнера сетки.

Ответ 2

У меня была аналогичная проблема при использовании ее на странице, на которой была загружена твиттер bootstrap css. Решение заключалось в том, чтобы переопределить размер окна в поле содержимого

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

вероятно, должен выяснить, какие именно классы действительно нуждаются в нем, но это отсортированные вещи для меня.

Ответ 3

Мне удалось заставить это работать в 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 { ... }

Ответ 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() и .show(), но я подозреваю, что это сработает, если вы будете манипулировать атрибутом display: none; напрямую, если вы не используете JQuery.

Надеюсь, что это поможет.

Ответ 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?

Ответ 7

Решил это для меня. Это то, что я делал: 1. Инициализация сетки 2. добавить к нему данные 3. Представьте его с использованием модала div, содержащего сетку

Чтобы решить, я сделал следующее: 1. Представьте его, используя модальный div, содержащий сетку 2. Инициализация сетки 3. Добавить данные