Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic - How to set <Ion-scroll> height so that it automatically adjusts in all resolution devices?

My code is as follows:

<ion-scroll style="height:200px;">
<ion-item  ng-repeat="items in Items" >
<!--repeat group-->
</ion-item>
</ion-scroll>

I have a scroll view of height = 200px, this looks ok on small devices, but when I view this on large device, the content appears too small because the height is '200px' which is comparatively small. So, what's the proper method of fixing this? I tried using height in percentages but it did not fix. Please, help and sorry for my bad English.

like image 428
Biswas Khayargoli Avatar asked Sep 08 '15 11:09

Biswas Khayargoli


1 Answers

Use vh unit instead of px.You can set vh value from 1 to 100, 100 vh means full screen size. Your code will be:

<ion-scroll style="height:100vh;">

or if height does not work then

<ion-scroll style="max-height:100vh;">

Usefull link about styling with vh.

like image 156
Mudasser Ajaz Avatar answered Nov 20 '22 04:11

Mudasser Ajaz