How to make blocks flow with Foundation-apps

Question

I'm using Foundation-Apps in am html page where I want to display a series of blocks (unknown number) in rows of four.

That much I've managed:

<div class="grid-block small-up-4">
  <div ng-repeat="thing in vm.collection"  class="grid-content">
      <myDirective thing="thing" expanded="false"/>
  </div>
</div>

Now the problem is that I need to allow each of the blocks rendered (by myDirective) to be horizontally expandable and when it expands for it to be the only block on that row.

I tried removing the small-up-4 (which as I understand means split the next element into 4 and size children accordingly) and toggling size classes on the out of my directive (ie use small-3 when 4 columns or small-12 when expanded and should take up a full row) but I only seem to be able to get either a single block on a row, or 4 blocks and their internal size changing as I set the second content to be visible.

myDirective outputs something like this:

<div class-"grid-block">
  <div class="card" class="{{vm.expanded?'small-3':'small-12'}}">
  ....
  </div>
  <div ng-if="vm.expanded" class="card small-9">
    ....
  </div>
</div>

The vm.expanded bit is working ok both in directive and adding/removing classes. This is a Foundation thing, not Angular.

How can I achieve this? Expanding element takes up a whole row while other blocks stay same size and flow to next row?

Answer 1

Looking at the most recent documentation for version 1.2 you should be using the "wrap" class instead of "small-up-4" in the top level div. This will wrap any grid-block that doesn't fit in the current row anymore.

Haven't tried it though.