How to set the custom width of a ion-segment-button

Ionic Framework
1

Hello, I am new to ionic and I am trying to make a new date component using ion-segment. I would like to know how do I set a custom width for the ion-segment-button as they are taking up a lot of unnecessary space. I already tried using max-width in my css file but it didn’t work. Here’s my code:

<ion-item lines="none" color="madeira">
  <ion-icon slot="start" name="calendar"></ion-icon>
   <ion-segment (ionChange)="dataChanged($event)" scrollable>
     
    <ion-segment-button layout="icon-hide" *ngFor="let vaData of datas" [value]="vaData" [checked]="isDataAtual(vaData)">
      {{vaData|date:'MMM'}}<br/>
      {{vaData|date:'dd'}}
    </ion-segment-button>
  </ion-segment> 
</ion-item>

This is my scss file:

ion-segment-button {
    --padding-start: 0px;
    --padding-end: 0px;
    --margin-end:0px;
    --margin-start:0px;
    --color-checked:white;      
  }

Thank you

2

hello, Share screen view… and i try your html and css working fine

3

This is my view, I would like to decrease the width of each ion-segment-button.

image

4

Try this

first put your ion-segment-button inside ion-item
then define your desire width to the ion-item move ngFor from ion-segment-button to that ion-item

code will be something like this

<ion-item style="max-width: 1rem;" *ngFor....>
  <ion-segment-button ...>...</ion-segment-button>
</ion-item>
5

Thanks, but it didn’t work. The width of the segment-button does not change.