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

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)">

This is my scss file:

ion-segment-button {
    --padding-start: 0px;
    --padding-end: 0px;

Thank you

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

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


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>

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