How send elements on the "right" when there is an overflow?

Question

I want to create the behaviour explained in the following scheme :

Each time an element is outside the screen i want it to be placed in a new column, on the right.

For the moment, all the elements are in the same column.

Here is how my elements are currently displayed :

  <style is="custom-style" include="iron-flex">
    .flex-wrap {
      @apply(--layout-wrap);
      @apply(--layout-vertical);
    }
  </style>
  <template>
    <div class="container flex-wrap" >
      <template is="dom-repeat" items="{{employeesArray}}">
          <employee-element name="{{item.title}}"
                           preview="{{item.preview}}"
                           width={{item.width}} height={{item.height}}>
          </employee-element>
      </template>
    </div>
  </template>

How can I force the element to be place in the location I drew ?

You would need javascript for that. – Paulie_D Apr 24 '16 at 13:22 — Paulie_D, Apr 24 '16 at 13:22
Not true, can be done with css, will post answer soon – Laurens Apr 24 '16 at 13:45 — Laurens, Apr 24 '16 at 13:45

score 1 · Accepted Answer · answered Apr 24 '16 at 13:47

It can be done with colomn properties which most newer browsers support:

.container {
    height: 100px;
    border: 1px solid black;
    column-fill: auto;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-width: 150px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
}

HTML:

<div class="container">
 <div>employee #1</div>
 <div>employee #2</div>
....
 <div>employee #x</div>
</div>

See this jsfiddle. More on colomn properties in CSS can be found here.

How send elements on the "right" when there is an overflow?

1 Answers1