Ion-scroll height

ionic-v1
1

Hi all,

i’m having some problems using the ion-scroll tag. As you see i have a ng-repeat with some elements. I cannot find out why isn’t the scroll working. If i add the following css code at the scroll (height:50vh), problem is solved but i don’t want to change the height of the scroll because i want it to adapt at the size of the div. Can someone please tell me where am i mistaking? Thanks

Here’s the html code:
< div class=“row”>
< div class=“col col-50” style=“background-color: #cccccc;”>
< ion-scroll direction=“y” class=“scrollVertical”>
< div>
< div ng-repeat=“item in kioskData”>
< div class=“row responsive-lg”>
< div class=“col col-50” style=“text-align:center;”>
< img ng-src="{{item.imageUrl}}" style=“max-width:100%;”>
< /div>
< div class=“col col-50” style=“padding:15px;”>
< strong>< p style=“font-size: 20px; margin-bottom: 0px;”>Marzo 2015< /p>< /strong>
< p>(37mb)


< div class=“button button-small button-stable btnStyle” ng-class=“coloreEye” on-tap=“getItemModalShow(item)”>
< span class=“icon ion-eye”>< /span>
< br>
< div class=“button button-small button-stable btnStyle” ng-class=“coloreDownload” on-tap=“buyItem(item)”>
Download   Free
< /div>
< /div>
< /div>
< /div>
< /div>
< /ion-scroll>
< /div>

image

2

have you try to use collection-repeat ?

3

Hi bobrov1989,
i’ve already tried that but it seems it doesn’t do the trick… I think it has something to do with the scroll. If i change the scroll height to 50hv it seems working. But as I said, I don’t wan’t to change any css.

4

try to force scroll calculations after changes in view with $ionicScrollDelegate.resize()

5

I made a demo on CodePen so you can see what I am doing.

@mhartington Could you help me please? =(

6

So ion-scroll is meant to be generic enough that you can apply your own custom styles to it and set its sizing.

So some css here will go along ways.
You’d just need to adjust the css for the rows/columns as well

1 Like
7

Thanks a lot! Worked perfectly :smiley: