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

Я создаю панель инструментов, которая должна помещаться на экране в два столбца. Элементы на экране будут динамическими и разных размеров, размеры каждого будут меняться со временем. Поэтому я выбрал макет 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", а затем вручную повторно применю класс с помощью функции "проверить элемент", тогда Chrome будет работать так, как я ожидал, и распределит содержимое по двум столбцам. , как это делают IE и Firefox. Если я использую JS для имитации удаления и повторного применения класса multiColumn, то это не сработает (см. закомментированные биты javascript в скрипте).

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

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

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


javascript google-chrome css column-count
person Jasper    schedule 16.11.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это действительно похоже на ошибку 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);
person Jasper    schedule 16.11.2014

arrow_upward
0
arrow_downward

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

.multiColumn {
  min-height: 'auto';
}
person scoota269    schedule 06.08.2015