3

I'm trying to use the column-count to make a kind of week calendar to user tasks.

The main div of the week has the property of column-count to 7 and ALWAYS there will 7 childs. The seven days of this week. Inside this days there are the tasks, but the number of tasks is variable and it break the column-count logic.

Why column-count not consider just the first childs inside it?

Here's an example of what I'm saying: https://jsfiddle.net/nby5ctb2/

On the second list, I wanted the tasks 1, 1.1 and 1.2 on top of each other, and when there are no childs just skip these day.

The css I used was just this:

.week {
    -moz-column-count: 7;
    -webkit-column-count: 7;
    column-count: 7;
}

Thanks advanced

Asons
  • 84,923
  • 12
  • 110
  • 165
Cechinel
  • 677
  • 2
  • 8
  • 26

2 Answers2

4

You seem to have misunderstood the purpose of column-count and are therefore misusing it.

It's purpose is to take some content and divide it into the given number of columns with as close to equal amounts of content as possible. The only tool you have is break-inside:avoid to keep "block-like" content together.

But if you do use it to make one column taller than the rest, your are making all columns the same height, because that's what CSS columns does. So, for example, using break-inside:avoid on .day. will cause other shorter .days to pile up in the same column. It would only work if days in your week had equal amounts of content, which is clearly not the case.

First question that comes in mind is: why not use flex? Since you probably want your day's widths equal, you need to add width to the children. By default display:flex children have flex: 0 1 auto, which makes them flexible, depending on contents.

.week {
    display: flex;
}
.week > * {
  width: calc(100% / 7)
}

Fiddle.

tao
  • 82,996
  • 16
  • 114
  • 150
  • Wow. It's incredible. I didn't know about the display flex. Thank you very much. It's exactly what I want ^^ – Cechinel Jun 10 '17 at 15:16
  • If content overflows, you will want to have `overflow: hidden` as well ... and/or `word-break: break-all` if to expect long words or only text (that can have long words) – Asons Jun 10 '17 at 17:39
  • @LGSon From where I see it overflowing content is a completely different issue, not related to this one. My comments on `flex-width` referred to cases where 1 day contains 20 words and another day contains 1 word. Without a limit on `width`, flexbox makes the the `.day` with more content wider than the one with less content. Agreed? And yes, `flex-grow:0` is an option for preventing this, too. But, since it's `1` be default, it needed setting :). – tao Jun 10 '17 at 17:44
  • @AndreiGheorghiu No :) .. flex-basis alone is just fine to keep width ... https://jsfiddle.net/wpyfq825/ .... so `overflow: hidden` is very relative in this case – Asons Jun 10 '17 at 17:45
  • @LGSon, wait a second. You're right. I was like 100% sure default value for `flex-grow` was `1` and for `flex-shrink` is `0`. It's the other way around. Thank you for making this clear to me now. This explains a lot of trouble I had with it in the past. I was sure default value is `flex: 1 0 auto`; It looks like it's `flex:0 1 auto;`. Has it ever been `1 0 auto` in the past? Because I can clearly remember this. Or I'm going mad. :) – tao Jun 10 '17 at 17:51
  • 1
    @AndreiGheorghiu You're absolutely mad ... told you before :) ... kidding, the default is `0 1 auto`, though not all browser did that, so I guess that's where your earlier issues rose from ... that's why we need to set `flex: 1` all the time, so the item take all the space left – Asons Jun 10 '17 at 17:55
  • 1
    You're absolutely right. I sometimes look at the pile of devices on my desk and think: this is not normal. I shouldn't have to test all I do in 3 versions of Android and 3 versions of IoS, Linux and Win, all multiplied by required browser stack. This is what's crazy. And I don't want to think how it would have been without Autoprefixer. Thanks for the wake up call, @LGSon. Kindest regards. – tao Jun 10 '17 at 18:03
  • @AndreiGheorghiu Just need to say, I guess these _Auto_-this and _Auto_-that has a place, though it is good to know how things work, so one can see _what_ is wrong, when things _goes_ wrong :) – Asons Jun 10 '17 at 19:28
1

CSS Column is not the best solution to accomplish that. It strives to flow the content column wise, from left to right, and what you ask is to fight against it.

I recommend you use i.e. Flexbox, which does that very simple, and with better browser support.

.week {
  display: flex;
  flex-wrap: wrap;
}
.week .day {
  flex-basis: calc(100% / 7);
  word-break: break-all;
  overflow: hidden;
}
This works
<div class='week'>
    <div class="day">
        <div class="task" >Task 1</div>
    </div>
    <div class="day">
        <div class="task" >Task 2</div>
    </div>
    <div class="day">
        <div class="task" >Task 3</div>
    </div>
    <div class="day">
        <div class="task" >Task 4</div>
    </div>
    <div class="day">
        <div class="task" >Task 5</div>
    </div>
    <div class="day">
        <div class="task" >Task 6</div>
    </div>
    <div class="day">
        <div class="task" >Task 7</div>
    </div>
</div>

<br />
<br />

This <strike>doesn't</strike> work too, now
<div class='week'>
    <div class="day">
        <div class="task" >Task 1</div>
        <div class="task" >Task 1.1</div>
        <div class="task" >Task 1.2</div>
    </div>
    <div class="day">
        <div class="task" >Task 2</div>
    </div>
    <div class="day">
    </div>
    <div class="day">
    </div>
    <div class="day">
        <div class="task" >Task 5</div>
        <div class="task" >Task 5.1</div>
    </div>
    <div class="day">
    </div>
    <div class="day">
    </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • GTMA, LGSon. :). You might want to make children `flex: 0 0 calc(100% / 7)`, as one expects weeks placed one below the other to have equal widths for days. So I thought `width` is a more concise fit here. Also note IE has some trouble with `calc` in `flex-basis`. Not sure if it's still an issue, it was a few months back. – tao Jun 10 '17 at 14:51
  • @AndreiGheorghiu Doing `flex: 0 0 calc(100% / 7)` made IE collapse the columns...as is now, works just fine, thanks for the note though – Asons Jun 10 '17 at 15:02
  • So it only has a problem with `calc` on `flex-basis` when `flex-basis` is specified in shorthand? I didn't know that. I actually remember one case I really needed `calc` inside `flex-basis` but it never crossed my mind to switch from shorthand syntax to separate properties. Good to know I can still use it. Thank you. However, using `flex-basis` will still make days have unequal widths, depending on content, right? It wasn't required, but it's a reasonable expectation from a weekly display. So you need `max-width` here. – tao Jun 10 '17 at 15:07
  • @AndreiGheorghiu To use `width` or `flex-basis` doesn't matter if the content can overflow (like very long word or an image), and when that occur, with `width` the content will overflow into next column, and with `flex-basis`, the 7:th element will be pushed to the next line. The fix for either is to use `overflow: hidden`, so `width` in this case is no better, and `flex-basis` will not make `days` unequal width .... and no need for `max-width` either :) – Asons Jun 10 '17 at 17:32
  • @AndreiGheorghiu One can also add `flex-grow: 0` to overcome the issue where columns will have unequal width, though if content overflow for the same reason as mentioned in previous comment, `overflow: hidden` is necessary anyway. – Asons Jun 10 '17 at 17:35