Creating horizontal scroll contents in ionic

Ionic Framework ionic-v3
1

I have been trying to create horizontal scroll content using ion-scroll and css, but unable to achieve the results. Any guidance pls?

2

Have you seen this: http://ionicframework.com/docs/v2/api/components/scroll/Scroll/

Make sure to set scrollX to true.

5 Likes
3

Thanks Joshua. I tried that, but the content was not visible. i.e. using ion-scoll with scrollX=“true” made the content to hide.

Below is the code i tried,

<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>
2 Likes
4

am having exactly the same problem the content isn’t showing any ideas?

<ion-toolbar>
   <button (click)="goBack()" clear>
      <ion-icon name="arrow-back"></ion-icon>Back
   </button>
   <ion-title>Request</ion-title>
</ion-toolbar>
<ion-content>

   <ion-scroll scrollX="true">
 	  <img *ngFor="#i of request.images" [src]="imgSrc(i)" height="200px"/>
   </ion-scroll>

   <ion-item>
      <ion-label floating>Description</ion-label>
      <ion-textarea [(ngModel)]="request.description"></ion-textarea>
   </ion-item>

   <button (click)="addPhoto()">Add Photo</button>
</ion-content>
5

Hi @mhartington … Any workaround for this issue ? Or are we missing something here… Any guidance on this is much appreciated!!!.. Thanks.

6

Take a look at this demo.

So this is something closer to what you’re trying to do (from the looks of it)

6 Likes
7

Thank you, I was missing:

ion-scroll {
    white-space: nowrap;
    height: 250px;
}
8 Likes
8

Thanks a lot @mhartington. That worked!

9

This only works inside rootPage, if its a modal or pushed page not working

1 Like
10

has anyone got this to work?

11

It is doesn’t work with tabs like this

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
 
<ion-content>


 <ion-scroll scrollX="true">
       <img *ngFor="#item of items" src="http://placehold.it/350x150">
     </ion-scroll>     
 </ion-content>

Scroll works but tabs doesn’t show up. Seems z-index issue

12

How to give the scroll in segment is not working
below is my code

<ion-segment [(ngModel)]="stationService" primary style="border:1px solid;" >
  <ion-segment-button (click)="ShowHandling_Coo()" value="HandCord" style="width:90px;">
  Airport Charges
  </ion-segment-button>
  <ion-segment-button  (click)="ShowHandling()" value="Handling" style="width:90px;">
   Handling
  </ion-segment-button>
  <ion-segment-button  (click)="ShowFuel()"  value="Fuel" style="width:90px;">
   Fuel
  </ion-segment-button>
  <ion-segment-button (click)="ShowHotel()" value="Hotel" style="width:90px;">
   Hotel
  </ion-segment-button>
   <ion-segment-button (click)="ShowTransport()"  value="Transport" style="width:90px;">
   Transport
  </ion-segment-button>
  <ion-segment-button (click)="ShowCatering()"  value="Catering" style="width:90px;">
   Catering
  </ion-segment-button>
  <ion-segment-button (click)="ShowSpecial()"  value="Special" style="width:90px;">
   Special Request
  </ion-segment-button>
</ion-segment>
1 Like
13

Has anyone got the horizontal scroll working?
I am facing the same problem…

14

Are you getting problem in segment horizontal scroll ?

15

try here…i think it would be helpful https://github.com/SinoThomas/Ionic2-ScrollableTabs

16

Hope this could help anyone struggling to have the scrolling work.

The trick is to set enough width for the object inside scroll component to work.

<ion-scroll scrollX="true">
  <ion-segment style="width: 800px;">
    <ion-segment-button>...</ion-segment-button>
    ...
  </ion-segment>
</ion-scroll>
17

If you don’t want to be limited with ionic2 tabs, and you want extra freedom and flexibility e.g. swappable tabs, fluid animation, something similar to http://materializecss.com/tabs.html
Checkout my horizontalIonic2Tabs repo here

I created this after struggling for hours with ionic2 tabs.
:slight_smile: enjoy!

2 Likes
18

It seems to me that the problem is when you swipe up/down over an input element.
This didn’t happen on pages where I had just content displayed.
What I did was made some room on the sides by setting the width to auto or something less than 100% and then you can scroll if you swipe on the side. Not great but it works.

20

You can see this post where i explain how i achieved it:

21

m unable to add this, can u please help me

1 Like