Chrome not calculating column height correctly after JS resizing <li> elements in multicolumn <div>

Question

I'm creating a dashboard which should fit content on a screen in two columns. The elements on the screen will be dynamic and of different sizes, the sizes of each will vary over time. Therefore I chose a multicolumn div layout, this will vertically fill up the columns nicely and distribute the content evenly over the two columns.

For tables with a lot of rows, the idea is to put these tables within a fixed height scrollable container. This way all elements will still fit on the screen, leaving only the top X rows of each table visible.

I placed these containerized tables within li elements, within a multicolumn div. Then I use javascript to calculate the height of the first X amount of rows which should be visible without scrolling.

So far, so good.

What this all comes down to:

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

A working example in JS Fiddle:

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

This jsfiddle will just work fine in IE and Firefox (showing two columns as it should).

But in chrome it just shows 1 big column with a lot of whitespace below it.

.

What I think is the problem:

Chrome seems not to respect the new container height when calculating how li elements should be distributed over the columns. That's because the container height was updated by the javascript function. This is illustrated by the whitespace below the elements of the first column.

Interestingly, if I remove the multiColumn class from the div with id="divMultiColumn", and then manually reapply the class using the "inspect element" function, then Chrome does work as I would expect and it will distribute the content over the two columns, just like IE and Firefox do. If I use JS to mimic the removal and reapply of the multiColumn class then this doesn't work (see commented out javascript bits in the fiddle).

Also, if I set the height property of the table container using static CSS, chrome works fine.

I cannot work out why Chrome does not recalculate how content should be distributed over the columns after using JS to dynamically alter the height of elements within the column. Is this a bug?

Does anybody have an idea for a workaround?

Answer 1

This indeed seems to be a chrome bug: https://code.google.com/p/chromium/issues/detail?id=297782

Here's the workaround I found, a little JS script which resets the CSS class, with a delay. Without the delay it won't work.

var cols = $(".multiColumn").css("-webkit-column-count");
$(".multiColumn").css("-webkit-column-count","1");
setTimeout( function(){
    $(".multiColumn").css("-webkit-column-count",cols);
},1);

Answer 2

I found adding min-height was enough to trick Chrome into rendering correctly.

.multiColumn {
  min-height: 'auto';
}