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 ?

Ion content already generates ion scroll. Can you copy paste your full code because this is weird. — Missak Boyajian
– Missak Boyajian, Commented Apr 13, 2018 at 9:45
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. — Milos
– Milos, Commented Apr 13, 2018 at 9:51

Ahmed Hamed · Accepted Answer · 2018-05-25 09:16:34Z

6

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;
}

edited May 25, 2018 at 9:16

answered May 25, 2018 at 9:07

Ahmed Hamed

4214 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milos · Accepted Answer · 2018-04-13 10:53:28Z

0

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

answered Apr 13, 2018 at 10:53

Milos

1,9084 gold badges30 silver badges56 bronze badges

Comments

Seven · Accepted Answer · 2018-07-12 15:29:21Z

0

You can use 'ion-list' property in CSS and change this:

ion-list 
{
    overflow-y: scroll;
};

Also, if doesn't change yet, you can put '!important' after, like this:

ion-list 
{
    overflow-y: scroll !important;
};

answered Jul 12, 2018 at 15:29

Seven

11 bronze badge

Collectives™ on Stack Overflow

Ionic 3 scrollable content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related