изменение размера заголовка столбца slickgrid приводит к смещению его с телом

Я использую SlickGrid 2.2 с Bootstrap 3.1.0 css. Когда я пытаюсь изменить размер заголовка столбца, ячейка заголовка столбца не выровнена с ячейкой в ​​теле. Заголовок постоянно больше, чем тело, независимо от того, сжимаю я его или растягиваю. Я использую код из примера 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. Кажется, это указывает на то, что проблема с рендерингом была исправлена, однако я считаю, что мое условие, когда размер элемента изменяется, все еще не работает.


javascript css twitter-bootstrap slickgrid
person user3267934    schedule 04.02.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я решил эту проблему, поместив div slickgrid в div со стилем display:table следующим образом:

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

для блока сценария:

grid1 = new Slick.Grid("#grid1", data, columns, options);

а также я использую для зависимости в конце кода:

grid1.autosizeColumns();

Также я обнаружил, что эта проблема возникает, когда я использую

<center> <center>

теги вокруг div

person Kaxa    schedule 14.12.2014
comment
css мне достаточно! Спасибо Каха! - person zobidafly; 28.04.2015

arrow_upward
3
arrow_downward

Скорее всего, это потому, что bootstrap 3 использует box-sizing: border-box. Вам нужно будет сбросить .slick-headers и связанные с ним гладкие элементы заголовка/столбца, чтобы использовать box-sizing: content-box

Кроме того, запрос на вытягивание, о котором вы упомянули, устраняет ту же проблему, но он не был одобрен / объединен с фактическим кодом гладкой сетки.

person helion3    schedule 04.02.2014
comment
Спасибо, я попытался изменить css, чтобы использовать поле содержимого, которое решает проблему. Однако это вызывает другие проблемы, когда границы отображаются неправильно. И из того, что я могу сказать, похоже, что исправления были применены, по крайней мере, в slickgrid 2.2 (я вижу их в коде). В Slickgrid есть код, который явно проверяет рамку, а затем пропускает перерасчет размера с помощью padding/etc. но это, похоже, не исправляет ошибку, потому что ширина столбца заголовка по-прежнему отличается на 9 пикселей от тела. - person user3267934; 04.02.2014
comment
Убедитесь, что вы применяете размер блока содержимого ко всей сетке. У меня были те же проблемы, и я смог исправить это с помощью нескольких отличных селекторов. Нам пришлось отказаться от bootstrap 3 из-за IE7, иначе у меня был бы пример кода, которым я мог бы поделиться. Возможно, я смогу оглянуться назад в нашем репозитории сегодня и вытащить это. - person helion3; 04.02.2014
comment
Я опубликовал еще один вопрос, чтобы решить проблему, которая у меня возникает, если я использую код размера коробки. Вы можете видеть в этом коде, что я применяю его ко всем классам, у которых есть slickgrid_, как в этом посте: github.com/mleibman/SlickGrid/issues/742. Мой другой вопрос (с сопутствующей скрипкой) можно найти здесь: use-content-box" title="границы ячеек slickgrid обрезаются после настройки размера поля для использования поля содержимого"> stackoverflow.com/questions/21557847/ - person user3267934; 04.02.2014

arrow_upward
1
arrow_downward

Спасибо, у меня также были проблемы в Firefox (только), где столбцы заголовков были не выровнены с телом сетки. Этот пост помог решить мою проблему. Я использую slick.grid.css , как и предполагает предыдущий пост. Я добавил:

   -moz-box-sizing: border-box;
   box-sizing: border-box;

to: .slick-header-columns, .slick-headerrow-columns .slick-header-column.ui-state-default

ХТН

person user1313798    schedule 24.02.2014