Ionic 4: how to decrease the height of ion-segment-button?

Ionic Framework
#1

I already tried to set the padding and the margin to 0p but still the height didn’t decrease.

ion-segment-button {
  --padding-bottom: 0px;
  --padding-top: 0px;
  --margin-bottom: 0px;
  --margin-top: 0px;
}

I cant find any properties in the documentation that I can change the value.

Also tried to change the style height without success.

1 Like
#2

Anyone? please, can’t still find a way to do it.

1 Like
#3 
ion-segment-button {
  height: 30px;
  min-height: 30px;
  --border-radius: 4px;
  ion-label {
    margin: 0;
  }
}
#4

Hi MichaelMalony.

your solution doesn’t seems to work. It just cut the icons inside the buttons.

#5

Hello All. Try this.

ion-segment-button {
height: 40px;
min-height: 40px;
}

ion-segment-button.segment-button-checked {
border-bottom: 2px solid;
}

1 Like
#6

Thanks @Rohit786, the solution you suggested worked for me.

#9

Thanks. It works for me :slight_smile:

#10