Ion-scroll height problem with percentage

ionic-v1
1

I am trying to display a collection (using collection-repeat) and embedded in a ion-scroll and i have the problem that i can not set the height (of the ion-scroll) using percentages. It only works if i set the size using px.

I was wondering how could i set the list (the collection repeat inside the ion-scroll) to fit in the 50% of the screen.

Here is my code working with px:

<ion-scroll direction="y" style="width: 100%;height: 300px !important;">
  <div class="row" collection-repeat="user in $storage.users" collection-item-width="'100%'" collection-item-height="60">
  	<div class="col col-50 col-offset-10"><h1>{{user.name}}</h1></div>
  	<div class="col"><h1> {{user.value}}</h1></div>
  	<div class="col" >
  	  <button ng-click="increase(user.name)" class="button button-balanced" >
	   	+
  	  </button>
  	</div>
  </div>
</ion-scroll>

If i use percentages :

    <ion-scroll direction="y" style="width: 100%;height: 50% !important;">
  <div class="row" collection-repeat="user in $storage.users" collection-item-width="'100%'" collection-item-height="60">
  	<div class="col col-50 col-offset-10"><h1>{{user.name}}</h1></div>
  	<div class="col"><h1> {{user.value}}</h1></div>
  	<div class="col" >
  	  <button ng-click="increase(user.name)" class="button button-balanced" >
	   	+
  	  </button>
  	</div>
  </div>
</ion-scroll>

Then the collection is not displayed.

I would really appreciate any help you could give me.

Thanks in advance,

Greetings.

2

You should check for two things.

Firstly, did you set a parent container for the ion-scroll tags, if you did, does it have a height defined?

Secondly, ion-scroll is a tag only readable by angular, but when compiled into DOM, it generates a structure like…

<div class="ion-scroll">
   <div class="scroll">
      //your content is generated in here, where ".scroll" itself has no height(not defined in ionic css).
   </div>  
      
   <div class="scroll-bar"></div>
</div>
3

No, i dont have a parent container with a fixed height. The parent container is ion-content. And the structure of the code is being generated.

If neccesary here is the code with the container (Using percentages and then the collection is not being displayed):

  <ion-content class="has-header">
<ion-scroll direction="y" style="width: 100%;height: 50% !important;">
  <div class="row" collection-repeat="user in $storage.users" collection-item-width="'100%'" collection-item-height="60">
  	<div class="col col-50 col-offset-10"><h1>{{user.name}}</h1></div>
  	<div class="col"><h1> {{user.value}}</h1></div>
  	<div class="col" >
  	  <button ng-click="increase(user.name)" class="button button-balanced" >
	   	+
  	  </button>
  	</div>
  </div>
</ion-scroll>
 <div class="row">
  <div class="col-50" style="padding:2%;">
    <button ng-click="resetLocalStorage()" class="button button-full button-royal">
      Reinitialize!
    </button>
  </div>
  <div class="col-50" style="padding:2%;">
    <button ng-click="fullReset()" class="button button-full button-assertive" > 
      Clear!
    </button>
  </div>
</div>

Thanks in advance,

Kind Regards,

Miguel

4

Then this is totally reasonable because ion-content also create a scroll div to wrap your ionscroll. You should try to add following css to your app.
.scroll{height:100%}
Normally this hack work with me.
Feel free to ask further problems.

1 Like
5

I created a css with the following

.scroll{height:100%}

And modify the code to this (deleted the height in the style of ion-scroll):

<ion-content class="has-header">
<ion-scroll direction="y" style="width: 100%;">
  <div class="row" collection-repeat="user in $storage.users" collection-item-width="'100%'" collection-item-height="60">
  	<div class="col col-50 col-offset-10"><h1>{{user.name}}</h1></div>
  	<div class="col"><h1> {{user.value}}</h1></div>
  	<div class="col" >
  	  <button ng-click="increase(user.name)" class="button button-balanced" >
	   	+
  	  </button>
  	</div>
  </div>
</ion-scroll>
 <div class="row">
  <div class="col-50" style="padding:2%;">
    <button ng-click="resetLocalStorage()" class="button button-full button-royal">
      Reinitialize!
    </button>
  </div>
  <div class="col-50" style="padding:2%;">
    <button ng-click="fullReset()" class="button button-full button-assertive" > 
      Clear!
    </button>
  </div>
</div>

But it still doesnt work. It doesnt display the collection. I dont know how could i set the height using percentage in ion-scroll. Maybe is it a bug ?

A lot of thanks in advance,

Any help will be really appreciated.

Greetings.

6

Can you create a codepen or plunker, etc., of this so we can play around with it?

7

Here it is:

Thanks in advance.

If you set the height of ion-scroll to 300px instead of 50% it works. But i want to set it as a percentage.

8

Okay, take a look at this: http://plnkr.co/edit/tq241qy2Jj7TS8DRHkba?p=preview

It’s pretty simple. In your main.html, you have your view, within that you have your nav title and buttons. Then, you have a <div> that acts as a container for both the <ion-scroll> and the <ion-content>, which are siblings. This <div> takes into account the size of the header and otherwise takes up the rest of the screen (see the style attribute). The ion-scroll and ion-content then take their size from the container div. Ion-scroll can be set to height: 50%, and it will take 50% from the top of the <div> The <ion-content>'s default style is to take up the entire size of its container. So we override that by setting top: 50% so that it starts half way down the container.

Note that both areas will scroll, and on iOS they will scroll/bounce regardless of whether or not the content overflows their areas (I think… I don’t actually do iOS development), which might make for a strange user experience. You might want to disable scrolling on the <ion-content> if that area stays stationary.

9

Thanks a lot, that solves my problem.

But now i have a doubt:

Why does it have to be ‘absolute’ the position of the parent div ? Doesnt it limit the position to set the ion-scroll if i want to set it at the bottom and using a relative position ?

A lot of thanks in advance,

PS: I think the ‘absolute’ position is very restrictive.

10

I’m not sure what you mean. The div needs to be absolute so that it takes up the entire size of its parent (and thus the entire screen). If you want the ion-scroll at the bottom, just switch it with the ion-content and change the necessary style attributes. Another way to go at this might be flexboxes.

11

Go like:
`

`

in other words let the content you want to be scroll be loaded in a div, then wrap that div with the ionscroll. Have only height attribute in containing div.