Avoid reflow of css3 columns after they have been drawn

Refresh

November 2018

Views

411 time

3

I am using css3 columns to display an unordered list in 3 columns. The list items contain lists as well that can be shown or hidden by clicking on the title using jQuery.

The html looks like (with class names to describe the layout and interactions):

<ul class="i-display-in-3-columns">
  <li>
    <h3 class="slide-toggle-sibling-list-on-click">column title 1</h3>
    <ul class="i-am-initially-hidden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </li>
  <li>
    <h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3>
    <p>This can be very long with perhaps an additional paragraph as well.</p>
    <ul class="i-am-initially-hidden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </li>
  /* some more items */
</ul>

This works, but every time a sub-list is opened or closed, the columns get redrawn.

I would like to freeze the columns after they have initially been drawn to avoid this reflow so that every item stays in the column it is initially drawn in.

I can of course write a masonry-like solution in javascript to convert my list in 3 lists that are displayed next to each other, but I was hoping that there was an easier solution, preferably in just css or in javascript that keeps my list as a list.

Is that possible or would I just have to rewrite the DOM?

1 answers

1

Я не думаю , что вы можете добиться того, что с CSS столбцов. Существует возможность для переключения visibilityвместо displayиз дочерних списков, но я предполагаю , что вы не хотите этого.

Другим возможным решением CSS использует модуль Flexbox (и дело с вопросами поддержки браузера). Например, я считаю, что это может быть то, что вы хотите (работает на Chrome 29):

.i-display-in-3-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.i-display-in-3-columns>li {
    flex: 1 1 200px; /* 200px is the column width */
}

Demo