CODEWITHSUNDEEP
ionic-frameworkionic2
Thangaraj Esakky
Thangaraj Esakky

Reputation: 173

Horizontal scroll in ionic 2

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>

Upvotes: 17

Views: 28690

Answers (7)

Juan Antonio Herrer&#237;as
Juan Antonio Herrer&#237;as

Reputation: 96

I achieved the horizontal scroll with several ionic components:

ion-avatar scrollable HTML

<ion-content>
<ion-row>
    <ion-item no-lines>
    <ion-scroll scrollX="true" scroll-avatar>
        <ion-avatar>
          <img src="../../assets/whatever.png" *ngFor="let avatar of avatars" class="scroll-item"/>
        </ion-avatar>
    </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

ion-icon scrollable HTML

<ion-content>
  <ion-row>
    <ion-item no-lines>
      <ion-scroll scrollX="true">
        <ion-icon *ngFor="let avatar of avatars" name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
      </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

SCSS

  ion-scroll[scrollX] {
    white-space: nowrap;
    height: 120px;
    overflow: hidden;

    .scroll-item {
      display: inline-block;
    }

    .selectable-icon{
      margin: 10px 20px 10px 20px;
      color: red;
      font-size: 100px;
    }

    ion-avatar img{
      margin: 10px;
    }
  }

  ion-scroll[scroll-avatar]{
    height: 60px;
  }

  /* Hide ion-content scrollbar */
  ::-webkit-scrollbar{
    display:none;
  }

That worked for me with ionic 3.2.0 version.

ionic scrollX example

Upvotes: 8

cnotethegr8
cnotethegr8

Reputation: 7510

None of the answers here worked for me. What I ended up with is the following HTML.

<ion-scroll scrollX style="height:200px;">
  <div class="scroll-item">
    Item 1
  </div>
  <div class="scroll-item">
    Item 2
  </div>
</ion-scroll>

Along with this SCSS. It's important that the child elements are display: inline-block.

ion-scroll[scrollX] {
  white-space: nowrap;
  .scroll-item {
    display: inline-block;
  }
}

Upvotes: 14

Francisco Sandi
Francisco Sandi

Reputation: 1013

I used to have this issue too. I solve it like this:

1. Add this property to you <ion-scroll> tag in your .html file:

<ion-scroll scrollX="true">
... your content ...
</ion-scroll>`

2. Add this to you .scss file:

ion-scroll{
  overflow: scroll; 
  white-space: nowrap;
}

That should work for you :)

Upvotes: 1

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

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>

Upvotes: 1

ntaso
ntaso

Reputation: 614

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>

Upvotes: 5

user6132962
user6132962

Reputation: 39

For horizontal scroll you need to add the following tag :

<scroll-content>
    <ion-scroll scrollX="true" class="item">
        //your content
    </ion-scroll>
</scroll-content>`

Your content should be within it.

This code worked for me: 

<scroll-content >
    <ion-scroll scrollX="true"  class="item">
        <ion-row>
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col>  
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
        </ion-row>
    </ion-scroll>
</scroll-content>`

Upvotes: 3

sgengler
sgengler

Reputation: 1

Not sure if this is the exact issue you are having, but if your in a view which has swipe back enabled it will prevent horizontal scrolling anywhere on that page. Here's how to turn it off inside the @Page class:

constructor(nav: NavController) {
   nav.swipeBackEnabled = false;
}

Upvotes: 0

Related Questions