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

@rafaelevoinfo wrote:

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

Posts: 1

Participants: 1

Read full topic