ngFor and responsive row

Ionic Framework ionic-v3
1

Hi,

I use already ngFor in my project to repeat a full width ion-col and works as expected. But now i want to add the option when the client has enough width to show 2 ion-cols half sized side by side. The problem as you can see in the Plunker is that even when the width is enough the cols are stacked vertically.
Thanks

2

I have used the solution here but it doesn’t fit my needs because it doesn’t display all items when screen is small. This happens cause of the : [ngIf]="i % 4 === 0". Is there any way to increase manually the index of the ngFor to skip some items?

1 Like
3

None has any suggestions how to achieve this responsive layout? One col per row in portrait and two cols per row in landscape.

4

Hi @george_eleutheriou,

Just use the wrap attribute in the ion-row, like so:

<ion-row class="row" responsive-sm wrap *ngFor="#item of items">

That will allow your ion-item to display next to each other (if they fit inside the width). Check out how flexbox works (is what the grid system uses) and you’ll see how you can do pretty much anything.

2 Likes
5

Thank you very much @savelist for your time. My code looks like this:

<ion-row responsive-sm *ngFor="let store of stores | orderBy:order let i = index"> <ion-col width-50> <img src={{store.profileImg}} /> </ion-col> </ion-row>

and my css:

ion-row { width:100%; height:33%; }

ion-col { width:100%; height:100%; }

img { width:100%; height:100%; }

How can i apply your solution? I tried to add wrap in ion-row but nothing changes.

Thanks! :slight_smile:

6

Hey! This is @savelist from my personal account. As I wrote before, you should really check out how flexbox works…

Anyway, if you want to have 2 columns, using width-50 in ion-col looks good, but you might be overriding that directive in CSS with the width: 100% rule. Try to remove that.

You have good documentation for the grid here: http://ionicframework.com/docs/v2/components/#grid

7

Even if i remove the width rule from ion-col and even on img nothing changes. Did you see my Plunker?

Thanks

8

Hey! I changed my code a bit and now works thank you!
My code looks like this now:

<ion-row responsive-sm wrap> <ion-col width-50 *ngFor="let store of stores | orderBy:order let i = index"> <img src={{store.profileImg}} /> </ion-col> </ion-row>

and my css:

ion-row { width:100%; height:auto; }

ion-col { width:auto; height:33%; }

img { width:100%; height:100%; }

The problem i have now is that images have different height. Before all images had the same height: 33% because they inherited from the ion-row. Any ideas about this?

9

I told you it wasn’t difficult, you just had to try :wink:

Now your row’s height will expand depending on the number of items is containing, so the question is: the height should be 33% of what?, the row?, the ion-content?, the screen?

For the latter you can use the viewport height units (vh), like height: 33vh;. Other options depend on what you think that 33% should look like.

10

i want to have 3 images on the view(ion-content) at the time and to see the rest just scroll. That’s why i use the height:33% in the ion-col. When i put height: 100% in the ion-row i get the result i want, but i can’t scroll to see the rest even if i put overflow: scroll. When i remove it, the view is scrollable but the images have different sizes.

11

I update my Plunker so you can understand. I just want all images take the same space and when there is enough width (responsive-sm) to have 2 images per line.