Ionic 3 scrollable content

Question

I am using ionic 3.

<ion-header>
    <ion-navbar>
        <ion-title>{{ title }}</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>


</ion-content>
<ion-footer>
    <ion-title>
        {{ title }}
    </ion-title>
</ion-footer>

What ever I put in "ion-content" there is no scroll when content overcome height of the screen. I tried with grid in content:

 <ion-grid>
    <ion-row>
        <ion-col col-6>
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
        <ion-col col-6>
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
        <ion-col col-12 class="left-col">
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
    </ion-row>
</ion-grid>

Also tried with list:

<ion-list>
  <ion-item>Item 1</ion-item>
  <ion-item>Item 2</ion-item>
  <ion-item>Item 3</ion-item>
   ...
</ion-list>

Nothing works. What is the catch here ?

Solution 1

The real problem is that ionic global CSS property was overridden in the project. "scroll-content" class must not be changed in project styles.

Solution 2

I think this should be handled automatically by Ionic.

To enable vertical scroll to your page or any other container, there is a tag called

 <ion-scroll scrollY="true">
     // your content here
 </ion-scroll>

To enable horizontal scroll, just change scrollY=true to scrollX=true

in your sass file add the following :

ion-scroll {
    white-space: nowrap;
    height: 500px;
}

Comments

[Missak Boyajian]

Ion content already generates ion scroll. Can you copy paste your full code because this is weird.

[Milos]

I agree that is weird for me also. I do not know how to send full code example, since it is some for loop with data in greed. But I tried with simple example, grid and list I add here, and nothing happens, no scroll.