scrollable segments in ionic 2 (horizontal)

Question

I am trying to do horizontal scroll using segments in ionic2. Here is the code:

home.ts:

<ion-scroll scrollX="true" style="width:100vw;height:350px" >
<ion-segment [(ngModel)]="relationship" color="primary">


      <ion-segment-button value="friends" (ionSelect)="selectedFriends()">
        Friends
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
       <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>
      <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
        Enemies
      </ion-segment-button>

    </ion-segment>
      </ion-scroll>

According to this document, I used the ion-scroll outside the ion-segment, so I am getting the UI like this.

How can I make my name visible depending upon the length of the name and show only 3 to 4 names. After the user scroll, it should show the next names one by one.

score 12 · Answer 1 · edited Sep 19 '17 at 09:20

12

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;
    }
}

works fine

edited Sep 19 '17 at 09:20

1ac0

2,875
3
33
47

answered Sep 19 '17 at 09:10

PRATHYUSH P

175
1
5

score 2 · Answer 2 · answered Jun 08 '17 at 15:02

this solution is for Ionic2, so the solution was working only for Ionic2

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

as mentioned in the solution by Suraj find github discussion link here

scrollable segments in ionic 2 (horizontal)

2 Answers2