Chrome неправильно вычисляет высоту столбца после изменения размера элементов <li> в многоколоночном <div>элементе JS

Я создаю информационную панель, которая должна помещать контент на экране в две колонки. Элементы на экране будут динамическими и разных размеров, размеры каждого будут меняться со временем. Поэтому я выбрал многостолбцовый макет div, он будет красиво заполнять столбцы по вертикали и равномерно распределять содержимое по двум столбцам.

Для таблиц с большим количеством строк идея состоит в том, чтобы поместить эти таблицы в контейнер с прокруткой фиксированной высоты. Таким образом, все элементы будут по-прежнему помещаться на экране, оставляя видимыми только верхние X строк каждой таблицы.

Я поместил эти контейнеризованные таблицы в элементы li, внутри многоколоночного div. Затем я использую javascript для вычисления высоты первого количества X строк, которые должны быть видны без прокрутки.

Все идет нормально.

К чему все это сводится:

CSS:

div.multiColumn {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
ul.noBullets {
    list-style: none; 
    padding: 0;
    margin: 0 0.5rem 0 0.5rem;
    display: -webkit-box;
    display: box;

}
ul.noBullets > li {
    display: inline-block;
    width: 100%;
}
.scrollingTableDiv {
    overflow-y: auto;
}

HTML:

<div class="multiColumn">
  <ul class="noBullets" id="ulMultiColumn">
    <li>
      <div class="scrollingTableDiv"> <!-- this is the container -->
      <table class="scrollingTable" id="list1">
      ....
      </table>
    </li>
  </ul>
</div>

JavaScript:

$(".scrollingTable").each(function() {
    var table = this;
    maxRows = 10;
    var wrapper = table.parentNode;
    var rowsInTable = table.rows.length;
    var height = 0;
    if (rowsInTable > maxRows) {
        for (var i = 0; i < maxRows; i++) {
            height += table.rows[i].clientHeight;
        }
        wrapper.style.height = height + "px";
    }
});

Рабочий пример в JS Fiddle:

http://jsfiddle.net/m63LL112/4/

Этот jsfiddle будет отлично работать в IE и Firefox (показывая два столбца, как и должно).

Но в chrome он просто показывает 1 большой столбец с большим количеством пробелов под ним.

,

Что я думаю, это проблема:

Chrome, похоже, не учитывает новую высоту контейнера при расчете того, как элементы li должны быть распределены по столбцам. Это потому, что высота контейнера была обновлена ​​функцией javascript. Это иллюстрируется пробелами ниже элементов первого столбца.

Интересно, что если я удаляю класс multiColumn из div с id="divMultiColumn", а затем вручную повторно применяю класс с помощью функции "inspect element", то Chrome работает, как я и ожидал, и будет распределять содержимое по двум столбцам. так же, как IE и Firefox. Если я использую JS для имитации удаления и повторного применения класса multiColumn, то это не сработает (см. Закомментированные биты javascript в скрипте).

Кроме того, если я установил свойство высоты контейнера таблицы с помощью статического CSS, Chrome работает нормально.

Я не могу понять, почему Chrome не пересчитывает, как содержимое должно распределяться по столбцам после использования JS для динамического изменения высоты элементов в столбце. Это ошибка?

У кого-нибудь есть идея для обхода?

Источник

2 ответа

Решение

Это действительно похоже на ошибку Chrome: https://code.google.com/p/chromium/issues/detail?id=297782

Вот обходной путь, который я нашел, маленький JS-скрипт, который сбрасывает класс CSS с задержкой. Без задержки это не сработает.

var cols = $(".multiColumn").css("-webkit-column-count");
$(".multiColumn").css("-webkit-column-count","1");
setTimeout( function(){
    $(".multiColumn").css("-webkit-column-count",cols);
},1);
Источник

Я обнаружил, что добавления min-height было достаточно, чтобы обмануть Chrome в корректном рендеринге.

.multiColumn {
  min-height: 'auto';
}
Источник
Другие вопросы по тегам