Ionic 5 - making Ion-Segment vertical

Ionic Framework
1

I have somewhat weird requirement, which is making ion-segments show vertically. So far I’ve tried something like following but with no luck. Any ideas or suggestions?

<ion-segment>
        <ion-segment-button value="friends">
          <ion-label>Friends</ion-label>
        </ion-segment-button>
        <ion-segment-button value="enemies">
          <ion-label>Enemies</ion-label>
        </ion-segment-button>
</ion-segment>


ion-segment {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
  ion-segment-button {
    float: left;
    clear: left;
  }
}
2

Try this

ion-segment{
display : block;
}

3

It is positioned vertically now, however if I switch to mobile view in chrome debugging, second option becomes unclickable (cannot change to ENEMIES segment anymore).

image

So it basically works in full screen mode, but once I switch to mobile view or put my app to android emulator I cannot switch between options… Any idea why?

4

Try removing other css which you have added for ion-segment

5

Nope, display:block is the only css added to ion-segment… You can try it your self, its pretty simple to reproduce… Have no idea why its not working… If you reload page you can choose one and after that component just stop working…

6

yes i have tried, but i can able to change the value of ion-segment any number of times. Just try same thing in any other component. I think this issue is not happening because of ion-segment.

7

I’ve created a new Ionic App and used ion-segment inside app.component.html (startup page) and the problem still persists.

Steps to reproduce:

  1. Create new Ionic App (ionic 5) using angular template (I used tabs template)
  2. Removed code from app.component.html
  3. Added following to it:
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-segment>
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button value="enemies">
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>
</ion-content>
  1. Open app.component.scss and add:
ion-segment {
  display: block;
}
  1. Start your new app with ionic serve
  2. Once app starts (in chrome) open developer tools (F12)
  3. Change mode to mobile view (Ctrl+Shitf+M)

Going between segments is not working anymore. Btw thx for your effort so far, this glitch really drives me insane…

***** EDIT *****
I’ve tried same thing using Ionic 3.9.9 and this works just fine… It seems that Ionic 5 changes broke this… Any idea where can I post an issue regarding this?

8

Recently had the same (in ionic 4 made ion-segment vertical), but then moved to Ionic 5 and realized ion-segment now features ux to drag n pull the selector…so it is a bad practice trying to turn a screwdriver into a hammer…

I replaced it with just vertical column of ion-buttons with their fill property bound to state and it worked great.

2 Likes