CODEWITHSUNDEEP
cssionic-frameworkionic3
Milos
Milos

Reputation: 1838

Ionic 3 scrollable content

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 ?

Upvotes: 1

Views: 14176

Answers (3)

Seven
Seven

Reputation: 1

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

Upvotes: 0

Ahmed Hamed
Ahmed Hamed

Reputation: 421

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

Upvotes: 6

Milos
Milos

Reputation: 1838

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

Upvotes: 0

Related Questions