1

I have a layout problem and I'm having trouble thinking of a solution.

This is part of a form and basically its a dynamic list of checkboxes and their labels. Based on the screen width its either in 1, 2, or 3 columns.

We're arranging in columns, like for 3 columns:

1  5  9
2  6  10
3  7
4  8

If they were static this would be easy to do with css columns... but the challenge is that these are part of a treeview where each item can expand to show more items:

treeview closed treeview open

With CSS columns (or flexbox columns with a set height) if you expand, say, "2017" it will push the dates below it into the next column which I believe would be confusing for the end user. So ideally when 2017 is expanded, it would push everything below it down instead of into the next column.

This can be almost achieved by using flexbox and flex-wrap... but the only issue is the order.

So I basically want flexbox rows functionality with ordering like columns. I'm not great at math so I was wondering if there's something that can be done purely with CSS... but otherwise I am open to javascript solutions as well, though it needs to be accessible.

And ideas? Thanks.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
fallenturtle
  • 41
  • 6
  • Not without a fixed height. – Paulie_D Mar 31 '21 at 06:28
  • I could use js to determine and set a height, but it seemed like even with that I'm going to have an issue where lower items will be pushed over onto the next column. – fallenturtle Mar 31 '21 at 15:30
  • What does "the only issue is the order" mean? Like, how would the flex items get out of order? – dgrogan Mar 31 '21 at 19:38
  • @dgrogan I poorly worded that, I should have said the issue is with flexbox using the flex-direction: row since setting it to column would still have the issue of content being taller than the set height being pushed into the next column, but I wanted the order to be like it was in columns and not left to right. – fallenturtle Mar 31 '21 at 22:45

1 Answers1

2

I figured out a solution using CSS grids, grid-auto-flow: column;, and using Javascript to count the items I need to layout and inject it into some CSS into the document.

   function injectStyles(rule) {
      var reviewCount = document.querySelector("#tree-case-review-date .fancytree-container").childElementCount;
      var reviewCountTwo = Math.ceil(reviewCount / 2);
      var reviewCountThree = Math.ceil(reviewCount / 3);
      var purCount = document.querySelector("#tree-pur .fancytree-container").childElementCount;
      var purCountTwo = Math.ceil(purCount / 2);
      var purCountThree = Math.ceil(purCount / 3);
      var div = $("<div />", {
        html: '&shy;<style>@media only screen and (min-width:700px) { #tree-case-review-date .fancytree-container { grid-template-rows: repeat(' + reviewCountTwo + ', auto);} #tree-pur .fancytree-container { grid-template-rows: repeat(' + purCountTwo + ', auto);}}@media only screen and (min-width:1000px) { #tree-case-review-date .fancytree-container { grid-template-rows: repeat(' + reviewCountThree + ', auto);}#tree-pur .fancytree-container {grid-template-rows: repeat(' + purCountThree + ', auto);}}</style>'
      }).appendTo("body");   
    }

    window.onload = function() {
      injectStyles();
    };

I think this is an ungodly mismash of jquery and normal javascript, so I need to learn how to clean this up.

fallenturtle
  • 41
  • 6