Horizontal scroll in ionic 2

user_6054155 0
Viewed 28400

I have been trying to implement horizontal scroll in ionic 2 page. But the content always gets vertically scrolled.

I tried writing my own css by setting 'overflow-x to scroll'. But it didn't work. I also tried ionic's ion-scroll component by setting 'scrollX= true'. But the entire content got hidden. i.e it was not visible on the page at all. Below is the sample code i used for ion-scroll. Not sure what exactly i am missing here.

Any guidance on this pls?. (I am new to Ionic 2 and CSS. So sorry if the question is too simple.)

<ion-navbar *navbar primary>
    <ion-title>
        Title
    </ion-title>
</ion-navbar>

<ion-content>
    <ion-scroll scrollX="true">

        <ion-card>
            <ion-card-content>
                content
            </ion-card-content>
        </ion-card>
        <ion-card>
            <ion-card-content>
                content
            </ion-card-content>
        </ion-card>

    </ion-scroll>
</ion-content>
ionic2 ionic-framework
7 Answers

You need to define the height of your <ion-scroll> container. If you don't do this, it seems that the <ion-scroll> element always has a height of 0.

Example:

<ion-scroll scrollX="true" style="width:100vw;height:350px">
    <img src="test.jpg style="border:1px dotted red;width:700px;height:350px">
</ion-scroll>
user_33288830

For Ionic 2 RC this code worked for me, i wanted to scroll a list of icons:

<ion-item>
 <ion-scroll scrollX="true" style="height: 50px;" >
  <ion-icon *ngFor="let icon of icons; let i = index" name={{icon.icon_name}} (click)="selectIcon(icon, i)"></ion-icon>
 </ion-scroll>
</ion-item>
user_40995410
Related