Ionic-framework: Horizontally Scrollable ion-tabs

[chiragandroid]

Here I am requesting a new feature in ionic1 that is Horizontally Scrollable IONIC TAB

Actually, in ionic forms there is a lot of question on this topic some of that I am mentioning here.

By Rakesh Gajjar
many more

When we put too many ion-tab in ion-tabs . all tab text end by ...

so please make some feature that makes ionic tabs scrollable in ion-tabs.

Thank you.

[oktav777]

UPD: I thougth this thread is for Ionic2, so the solution was working only for Ionic2, sorry.

ion-segment {
    justify-content: space-between;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        flex: 1 0 100px;
    }
}

this is if you want fixed width tabs, if you want various width you should switch from flex to block/inline-block

ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

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

here is for various width tabs

[chiragandroid]

Hello @InfinityOne,
I have used ion-tab and ion-tabs to show tabs and view so, will i need to write ion-tab in place of ion-segment.

And i am using Ionic 1. i think ion-segment is ionic2 topic

[oktav777]

@chiragandroid ohhh sorry, did not observed it's about v1 ionic :(

[roshandhabekar]

@InfinityOne hey man thanks for your work , but when i used this code for ion-segment horizontal scroll,
it scrollable bu not able to swipe by touch ..

ion-segment {
display: block;
white-space: nowrap;
font-size: 0;
overflow: auto;

&::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

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

}

[oktav777]

@roshandhabekar sorry once again, but this was for ionic2...

[roshandhabekar]

@InfinityOne ya man i am trying with ionic 2 , still have same swipe not working issue
Thanks Man ..!

[jgw96]

This issue was moved to driftyco/ionic-v1#112

[met8]

@oktav777 Thanks man, your code saved me! However, the problem I'm facing now is that even though i use the second block of code, all my segments have fixed length. I want all the segments to automatically adjust to the text they contain (eg segment buttons with short text have smaller width than those with longer text).

(eg. here "Care" should have a smaller width and the text on the other two segments shouldn't be cut off)

Any ideas how I can do this?

Cheers!

[ljudbane]

@met8 I had the same issue and i found out that the last part of css styles was being overriden. I changed the style to:

ion-segment-button.segment-button {
      display: inline-block!important;
      min-width: 100px!important;
      width: auto!important;
    }

That fixed cutting off text with elipsis. Try adjusting min-width to make buttons smaller.

[bloigge]

@roshandhabekar maybe a little late ;-) - but I had the same issue - I found out that having a (tab) event on the ion-segment-button made the swipe not possible - changing the event to (click) enabled the horizontal swipe

[svit-ws]

@oktav777 your solution works, but on android emulator 1st item underlaying remains black on switching.
on web version all perfect... any ideas?

[ManigandanRaamanathan]

@ljudbane the unshrinking is not working under ion-toolbar. Any fix on using this inside ion toolbar?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.