How to make a grid when using collection-repeat?

[junerockwell]

Hello,

I made a custom mobile-first grid for collection-repeat and it looks like this http://codepen.io/junerockwell/pen/EazBVJ?editors=101 It works as intended. If you resize the CodePen view or the browser size, the number of columns change. Like for smaller screens, only 1 column. On a little bit bigger screen, there are 2 columns, 3 columns for much wider screens, and so on. But it only seems to work for browsers. And that’s the problem I’m having and that’s the reason why I need help.

I did the exact same thing on a real Ionic project (not CodePen). I used the same CSS, the same image binary. When I installed it on an iPhone5S and an regular-sized iPad, it doesn’t look the same. Succeeeding items appear to be on top of (or overlapping) previous items.

To have a visual idea, here’s the are photos of devices:

Some device screenshots for better viewing:

So can anyone tell me what’s going on, or does anyone have a solution to this bug, or is there an alternative?

The more important thing that I really want to accomplish is to have different number of columns based on screen size.

[junerockwell]

Anyone? @mhartington?

[mhartington]

So collection repeat doesn’t rely on css base placement for items. It uses js and has to use absolute positioning in order to place things.

So if you wanted to do something like a grid, you would need to use a js approach

[junerockwell]

@mhartington Thanks for enlightening me on this. Can you give me an example? Maybe a CodePen link or something? The thing is, I have layers of information. In an item, I need a picture and I also need to add text within each item. Everything seems to overlap. If I use item-height and item-width I still can’t get the look I want.

[mhartington]

So this is a really minimal approach

Blank Starter

[ysrael]

I really can’t wait till they fix angular material interaction with ionic

just look how marvelous their grid list is

[junerockwell]

Hi @mhartington. I tried doing your suggestion. But I’m having some problems. I’m using the sidemenu template. Initially, I’m using this Angular MatchMedia library. https://github.com/jacopotarantino/angular-match-media

The library works as intended in Android devices but only for the first page in the sidemenu template. The preceeding pages don’t update the item-width directive. So I used exactly what you suggested but it still didn’t work.

Here’s the CodePen to see how I setup the code. But I’m providing screenshots from one of my Android devices to demonstrate that on initial load I have the phone on portrait so based on the matchMedia, it should set item-width to ‘100%’ which it does. When I rotate the device to landscape, matchMedia resets item-width to ‘50%’ but when I rotate the device back to portrait, it stays ‘50%’ This is using basic $window.matchMedia. But this problem also happens when using that Angular MatchMedia module.

Here are the screenshots:
On device start up, Portrait

Rotate, Landscape. An alert to show that listener callback function was fired.

Landscape, 2 columns as intended

Rotate back, Portrait still 2 columns instead of intended 1 column

Android test device: HTC One, Nexus 7

I really need help beause I’ve been working on this every other day if not everday for a couple of months now. The collection-repeat grid is complicated.