Ionic - How to set height so that it automat

Question

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.

Answer 1

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.

Answer 2

Here what did i do, in your scroll, wrap it with this class: modal-parent, modal-top, modal-scroll

<ion-modal-view class="modal-parent">

  <ion-item class="modal-top">
    ...
  </ion-item>

  <ion-scroll class="modal-scroll" style="height:100px;width:100%;"...>
    ...
  </ion-scroll>

</ion-modal-view>

in you js define this function:

  function setScrollHeight(parent, top, scroll, index, offset){
    var parentH = document.getElementsByClassName(parent)[index].clientHeight;
    var topH = document.getElementsByClassName(top)    [index].clientHeight;
    var scrollH = document.getElementsByClassName(scroll)[index];

    scrollH.style.height = parentH - topH - offset + 'px';
  }

and you are ready to go by calling something like this

setScrollHeight('modal-parent', 'modal-top', 'modal-scroll',1 ,100);

basically, modal-parent will minus modal-top and the result will set modal-scroll's height

offset something like padding