7

I want to display some Bootstrap list groups dynamically in multiple columns using CSS columns, but I'm getting some weird spacing issues in Chrome. Firefox works perfectly. It looks like exactly the issue this guy had, but he never got an answer, possibly because he didn't provide a good example. So I will provide a good example.

CSS (loaded after Bootstrap):

.columns {
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
  width:  100%;      
}

HTML:

<div class="columns">
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Here it is on Bootply. Everything is fine in Firefox: the first 3 list groups go in the first column, the next 3 go in the second. But in Chrome, the first 4 go in the first column, leaving the second column very short with only 2. How can I get it to balance?

(I've also observed another problem described in the same question I linked to above where sometimes Chrome will create a big margin under the columns, but I'll leave that for a separate question later.)

Community
  • 1
  • 1
dumbmatter
  • 9,351
  • 7
  • 41
  • 80
  • 1
    It is all about `column-fill: balance`, which is not supported by chrome, and is the default value of `moz-column-fill` -> https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill. Try set `moz-column-fill : auto` for POC. – davidkonrad Jan 29 '15 at 14:31
  • 1
    `.columns { height : 400px; }` seems to "solve" the problem in chrome, but I am sure you are aware of this and want a real solution instead. – davidkonrad Jan 29 '15 at 14:42
  • 1
    `-moz-column-fill : auto` seems to put all of the list groups in one column. Does that make sense? It's still different than Chrome, which splits it 4 and 2. According to [this](http://www.the-haystack.com/2012/06/01/multi-column-confusion/) Chrome is supposed to balance by default. It seems like maybe it's trying to balance but just doing a really bad job? – dumbmatter Jan 29 '15 at 22:42
  • 2
    And you're right, I would like a "real" solution, otherwise I have to use JS to dynamically estimate what the height should be, since I don't have a fixed number of columns or a fixed number of elements inside the columns... – dumbmatter Jan 29 '15 at 22:43
  • hey @dumbmatter, to the first - no, it does not make sense, it was not an answer - it was proof of concept that column-fill works on FF (it responds, Chrome or IE does not). To the next, I dont think you can achieve a "real" solution, sorry to say. If your columns are dynamic, you must go to javascript. I think it is weird, by the way, that it is only FF (Mozilla-engine) that supports column-fill. I cannot see the reason why the other engines should not. It is part of a (not confirmed) standard. – davidkonrad Jan 29 '15 at 22:51
  • "maybe it's trying to balance but just doing a really bad job" - that could be an explanation. But who knows. – davidkonrad Jan 29 '15 at 22:58
  • According to CanIUse, column fill is supported by Chrome starting with version 50. – s-m-e May 12 '17 at 13:30
  • ... yet it is still buggy in Chrome 58 if set to "balance" ... – s-m-e May 12 '17 at 13:53

1 Answers1

1

Possibly a stupid question, but have you looked into flexbox?

.columns {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
      width: 300px;
}

EDIT Going through unanswered questions and didn't realize how old this is.

Ishio
  • 755
  • 2
  • 9
  • 29
  • 1
    Old questions still deserve attention :) Your code works, but actually it seems that the original code in my question also now works in the current version of Chrome. What a world of abundance we live in! – dumbmatter May 20 '17 at 15:05
  • I was actually going to say that initially, but then figured, hey someone else might be on an older version of BS for some reason, why not! Glad both work! – Ishio May 20 '17 at 18:11