Horizontally scrolling sub header in ionic 2

ionic-v1
1

Hey,
I’m interested to have horizontally scrollable sub header in my ionic 2 based app as follows:

image

I tried ion-toolbar with 1) some css kung-fu or with 2) ion-scroll – but didn’t manage to make it work.

I believe I can’t use scrollable tabs approach, because I already have main tabs and this sub header belongs to one of the tabs.

Please help?

Thank you,
Katrin

1 Like
2

Hav you thaught of overflow-x ?
doc can be found here :
http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=hidden

3

Thanks for replying @JC_cap. Yes that what I meant by “some css kung-fu” -:). It feels like since ion-toolbar has absolute position, overflow-x doesn’t have any effect on the element itself or anything nested in it. I’m not a css expert though that’s why I’ve asked the question :).

4

Hi @katrinsharp. I am working on a horizontal content scroll. And ion-scroll isn’t working for me too :-(. Did you manage to complete the scroll?

5

@mhartington I seem to have this issue as well. I’ve looked around this forum and the web without any success. So far I don’t think there’s an easy way to horizontally scroll within an ion-toolbar. Please tell me if i’m mistaken.

6

Any way to do it actually?

7

Ionic is working on material design swipeable tabs. When this is implemented, they might solve this problem.

8

In case somebody is still looking for this and also coming to this thread, I came up with this simple css solution in Ionic 2 RC4. Did not test it on real devices yet, but in browser it looks ok so far:

ion-toolbar.scrollable-segments {
	ion-segment {
	  display: block;
	  overflow-x: scroll;
	  white-space: nowrap;

	  ion-segment-button.segment-button {
		display: inline-block;
		width: auto;
	  }
	}
}

template:

<ion-toolbar no-border class="scrollable-segments">
    <ion-segment [(ngModel)]="segment">
        <ion-segment-button value="all">
            All
        </ion-segment-button>
        <ion-segment-button value="test">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test2">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test3">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test4">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test5">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test6">
            Recent
        </ion-segment-button>
        <ion-segment-button value="test7">
            Recent
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>
6 Likes
9

Thanks a ton… It solved issue :slight_smile: