Ionic Grid Layout with ng-repeat

ionic-v1
1

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.

2

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

codepen

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:

3
1 Like
4

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

check ‘word9’ in :
codepen-word9

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

Is there some workround for this with Ionic Grid please?

Thank you.

5

Why not just create a col-100 class?

.col-100{
  width: 100%;
}
6

Hi @mhartington,

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

codepen-col 100

Can you please check.

7

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.

8

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: https://css-tricks.com/almanac/properties/f/flex-wrap/, 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.

9

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}}" />
</div>
.half-size{
   width: 50%;
   display: inline-block;
}
1 Like