How to centralize ion-button into ion-buttons tag

@ejamartins wrote:

I’m including inside a ion-toolbar the following code but unfortunately the buttons are not centralized.

src/app/tab2/tab2.page.html

<ion-toolbar>
        <ion-item class="calendar">
                <ion-buttons>
                    <ion-button class="btncalendar" (click)="previous()">
                        Previous
                        <ion-icon slot="start" name="rewind"></ion-icon>
                    </ion-button>
                    <ion-button class="btncalendar">
                        <ion-icon slot="end" name="calendar"></ion-icon>
                        <ion-datetime #myPicker display-format="DD/MM/YYYY" [value]="screenDateTime"
                                      (ionChange)="updateDate(myPicker.value)" [(ngModel)]="value"></ion-datetime>
                    </ion-button>
                    <ion-button class="btncalendar" (click)="next()">
                        Next
                        <ion-icon slot="end" name="fastforward"></ion-icon>
                    </ion-button>
                </ion-buttons>
        </ion-item>
        <ion-item class="header">
            <ion-grid>
                <ion-row>
                    <ion-col align-self-start>Col1</ion-col>
                    <ion-col align-self-center>Col2</ion-col>
                    <ion-col align-self-end>Col3</ion-col>
                </ion-row>
            </ion-grid>
        </ion-item>
    </ion-toolbar>

variables.scss

.calendar {
  --color: #000000;
  --background:#ffa4a2;
}
.btncalendar {
  --color: #FFFFFF;
  --background:#e57373;
}

screen:

Captura de Tela 2019-04-11 às 14.40.37.png826×154 10.9 KB

Do you have an idea how can I centralize in the ionic 4? I didn’t find anything about that in the ionic documentation.
Thanks
Edson

Thanks

Posts: 1

Participants: 1

Read full topic