Ionic Grid Layout with ng-repeat

With reference to codepen from @mhartington :
codepen grid

Can someone help me to create rows with varied number of columns using single ng-repeat on a template?

For example,
row 0- with 3 columns
row 1 -with 2 columns
row 2-with 1 column.

And, as the number of columns change ,the displayed column(s) should automatically stretch to occupy the full row space.

I have implemented it with nested ng-repeat but then I’m not able to apply ngFx animations to it.So, I’d like to achieve the same with a single ng-repeat.

Any help would be appreciated.

Thank you ! :wink:

I had the idea of using ng-if on a column element but not sure if it’s the efficient way.

I played around a bit with Ionic Grid and implemented this:


But still I’m not able to set col-percentage xplicitly to 100% on Ionic Grid. Is there some way to achieve this?

@mhartington @xAlien95

Thanks in advance :wink:

1 Like

Hi @mhartington This trick doesn’t work if the ‘col’ is not explicitly defined for not the last value/row.

check ‘word9’ in :

I could set explicitly col to col-90 but not 100 as seen here:

Is there some workround for this with Ionic Grid please?

Thank you.

Why not just create a col-100 class?

  width: 100%;

Hi @mhartington,

I did it your way but doesn’t work. I created .col-100 CSS

codepen-col 100

Can you please check.

Hi @mhartington,

.col-100 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 100%;} 

This does the trick :wink:

I got it working : codepen

Thank you for the support. You gave me the spark.

I tried this on iOS and emulator, the flex-wrap doesn’t work well as in chrome/firefox. The “.row” div wrap all .col items into one giant row with cols piled to the right end.

It appears that Safari doesn’t support flex-wrap property so well, refer:, so the following styles need to be added into .row div:

display:-webkit-flex; -webkit-flex-flow: row wrap;

Then it’ll work correctly in iOS/safari.

Simple solution I use:

add a class with display: inline-block; as below:

<div ng-repeat="image in Images" class="half-size">`
   <img ng-src="{{image.imageurl}}" />
   width: 50%;
   display: inline-block;
1 Like