Collection repeat breakpoint responsive

ionic-v1
1

Hey There,
i Just Wondering if i can use collection repeat with breakpoint (screen media) for changing the collection width
thx

2

Hmm, you should be able to, but you would have to work it into javascript

 $scope.getItemWidth = function(item) {
   var smallScreen = window.matchMedia("(max-width: 500px)");
   var meduiumScreen = window.matchMedia("(max-width: 800px)");
   var largeScreen = window.matchMedia("(min-width: 801px)");

   if (smallScreen) {
     return '100%';
   } else if (meduiumScreen) {
     return '100%';
   } else(largeScreen) {
     return '90%';
   }
 };```

or something similar to that
3

Ty @mhartington
I did a similar solution like you said.
It work well, The problem is when the collection repeat get into my function it render again, i like to have a smooth transition between screen media.

thanks again.

4

Hmm, not sure how much can be done, especially considering how collection repeat works

5

Hi Guys,

I wanted to asked similar thing… How would you solve this problem with HEIGHT ?

I have list of images with no extra information [see the screenshot]. Just 1 image per list row.

Width works for me as well cuz I am using %, but for the height I am using px and as I am enlarging browser window I want the image proportionality enlarge as well. But I am afraid that in JS the solution will not be smooth as in CSS.
And when I have such requirement is this collection repeat even good component for this? Ideally I would like to omit the collection repeat height and leave only css class/style.


Thanks,
-Fk