Content not scrolling in ionic

Question

Below is my html.. for some reason it won't scroll. This happens both in Android and iPhone.

<ion-view view-title="Active">
  <ion-content class="padding" style="text-align:center" scroll=true has-bouncing="true">

    <table class="user-block">
      <tr ng-repeat="user in userList">
        <td class="field1">{{ user.field1 }}</td>
        <td class="filed2">{{ user.field2 }}</td>
        <td><img class="face" 
                     ng-src="{{imageUrl}}/images/profile/{{user.facebookId}}.jpg">
        </td>
      </tr>
    </table>

  </ion-content>
</ion-view>

The table renders fine but it won't scroll. In my css, I haven't set overflow to anything so values are whatever the default ionic values are.

Is it because I am using table ? Is there some other custom ionic component that I should be using ?

Answer 1

It must be scroll="true". Most likely a simple typo...

Answer 2

Yes there is some ionic specific component to show list.

Use below code:

<ion-list>
        <ion-item ng-repeat="user in userList">
           {{user.field1}}
        </ion-item>
</ion-list>

Answer 3

This line:

<ion-content class="padding" style="text-align:center" scroll=true has-bouncing="true">

should be:

<ion-content class="padding" style="text-align:center" scroll="true" has-bouncing="true">

please note the "" for scroll=true

Answer 4

try this

<ion-view view-title="Active">
<ion-content overflow-scroll="true" class="padding" style="text-align:center" scroll=true has-bouncing="true">

<table class="user-block">
  <tr ng-repeat="user in userList">
    <td class="field1">{{ user.field1 }}</td>
    <td class="filed2">{{ user.field2 }}</td>
    <td><img class="face" 
                 ng-src="{{imageUrl}}/images/profile/{{user.facebookId}}.jpg">
    </td>
  </tr>
</table>

Answer 5

This happens sometimes if the size of the container is changed after rendering. After retrieving the array your are looping through, you will need to call:

$ionicScrollDelegate.resize();

Make sure to pass in the $ionicScrollDelegate dependency into your controller.

More info: http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

I would also recommend using a built in ionic directive rather than a table if at all possible.

Answer 6

Try:

<ion-scroll></ion-scroll>

If problem persist try giving:

overflow-y: scroll

to table in .scss file.

Answer 7

use this in your ion-content tag

overflow-scroll="true"

Answer 8

         add this line
         <ion-content scroll="true">

        also you can use css for your given class,
    <table class="user-block">

in your style.css add following css so that your class can scroll.

.user-block {
   height: 100%;
   width: 100%;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}