title: scrollable segments in ionic 2 (horizontal)
body: <p>I am trying to do horizontal scroll using segments in ionic2. Here is the code:</p>
  
  <p>home.ts:</p>
  
  <pre><code>&lt;ion-scroll scrollX="true" style="width:100vw;height:350px" &gt;
  &lt;ion-segment [(ngModel)]="relationship" color="primary"&gt;
  
  
        &lt;ion-segment-button value="friends" (ionSelect)="selectedFriends()"&gt;
          Friends
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
         &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
        &lt;ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"&gt;
          Enemies
        &lt;/ion-segment-button&gt;
  
      &lt;/ion-segment&gt;
        &lt;/ion-scroll&gt;
  </code></pre>
  
  <p>According to <a href="http://ionicframework.com/docs/v2/api/components/scroll/Scroll/" rel="noreferrer">this</a> document, I used the ion-scroll outside the ion-segment, so I am getting the UI like this.</p>
  
  <p><a href="http://ionicframework.com/docs/v2/api/components/scroll/Scroll/" rel="noreferrer"><img src="https://i.stack.imgur.com/dwHo2.png" alt="image"></a></p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>