Adding another column when row reaches XX

Question

I am trying to make a nice display of my array data within an element that has a certain width/height. What I want to do is that when my data reaches the bottom of the element to start a new column and continue with printing the data within that next column and so on/forth

Any help is much appreciated!

My code:

            <div class="repeater" ng-repeat="files in files">  {{files.name}}              
                <div class='progress-bar'>
                  <div class='percentage' ng-style="style">
                  </div>
                </div>
            </div>

Current view:

enter image description here

Do you know how many element you can have maximum in one column ? — Weedoze, Jul 07 '16 at 09:09

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

HTML/CSS solution

This should be better solved by CSS than by your application logic. You could display the file names as list and adapt the approach at

How to display an unordered list in two columns?

to display them in multiple columns.

edited May 23 '17 at 12:13

Community

1
1

answered Jul 07 '16 at 08:37

kenda

488
6
16

Thnx! Works fine now :) – B.Wesselink Jul 07 '16 at 08:54

Adding another column when row reaches XX

1 Answers1

HTML/CSS solution