How to centralize ion-button into ion-buttons tag

ejamartins · April 11, 2019, 5:44pm

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:

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

ejamartins · April 11, 2019, 7:48pm

I tried to find another way and got it.
Basically, I added the ion-buttons inside an ion-row/ion-col tags as below and now the buttons are centralized.

<ion-toolbar>
        <ion-item class="calendar">
            <ion-row>
                <ion-col align-items-center="true">
                    <ion-buttons>
                        <ion-button class="btncalendar" (click)="previous()">
                            Anterior
                            <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()">
                            Próximo
                            <ion-icon slot="end" name="fastforward"></ion-icon>
                        </ion-button>
                    </ion-buttons>
                </ion-col>
            </ion-row>
        </ion-item>
.
.
.

If you guys have any other way to solve this problem when centralizing the component, please let me know.
Edson

ejamartins · April 11, 2019, 7:52pm

Unfortunately, I got problems in the responsive screen when selecting iPhone 5s

If you have a better solution, please let me know

Thanks
Edson

jjdev · April 11, 2019, 7:54pm

<ion-buttons> can have a slot too

IonToolbar buttons

ejamartins · April 11, 2019, 7:59pm

I tried all slot types and got the same behavior:-(

jjdev · April 11, 2019, 9:17pm

the code you posted is not using slot in ion-buttons…

ejamartins · April 11, 2019, 10:09pm

<ion-toolbar>
        <ion-item class="calendar">
            <ion-row>
                <ion-col align-items-center="true">
                    <ion-buttons slot="primary">
                        <ion-button class="btncalendar" (click)="previous()">
                            Anterior
                            <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()">
                            Próximo
                            <ion-icon slot="end" name="fastforward"></ion-icon>
                        </ion-button>
                    </ion-buttons>
                </ion-col>
            </ion-row>
        </ion-item>

When using slot = “primary”, “secondary”, "end"and “start” the buttons disappeared.

jjdev · April 11, 2019, 11:39pm

ion-buttons has to be a first child of ion-toolbar
if you want to use <ion-row>, try the 'justify-content-between' directive and use 3 columns instead of 1

<ion-row justify-content-between>
    <ion-col size="4">
        <ion-button class="btn-calendar" (click)="previous()">
            <ion-icon slot="start" name="rewind"></ion-icon>
            Previous
        </ion-button>
    </ion-col>

    <ion-col size="4">
       <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-col>

    <ion-col size="4">
        <ion-button class="btn-calendar" (click)="previous()">
            Next
            <ion-icon slot="end" name="fastforward"></ion-icon>
        </ion-button>
    </ion-col>
</ion-row>

Does this work?

ejamartins · April 11, 2019, 11:58pm

Not properly. Look the screen using your code:

jjdev · April 12, 2019, 12:13am

Looks like I added hyphens to your outside button classes by mistake. Is that having an effect

A lot of times when I use a datetime, I have it hidden and show it on click, and display the value on the button manually

ejamartins · April 12, 2019, 12:50am

I changed the code and it’s working but in a different way

<ion-toolbar>
        <ion-item class="calendar">
            <ion-grid>
            <ion-row align-items-stretch>
                <ion-col>
                    <ion-button style="width:60px;" class="btn-calendar" (click)="previous()">
                        <ion-icon [size]="large"slot="start" name="rewind"></ion-icon>
                    </ion-button>
                </ion-col>
                <ion-col>
                    <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-col>
                <ion-col>
                    <ion-button style="width:60px;" class="btn-calendar" (click)="next()">
                        <ion-icon slot="end" name="fastforward"></ion-icon>
                    </ion-button>
                </ion-col>
            </ion-row>
            </ion-grid>
        </ion-item>

The result now is :

ejamartins · April 12, 2019, 1:00am

Thanks but I tried to solve using another way as the code shared.

rasmani795 · April 18, 2019, 8:46am

too write the css for floating the ion-button like

.backward {
float: left;
}

.forward {
float: right;
}

use it. Happy coding,…(~)

Topic		Replies	Views
How can I separate and center the buttons? ionic-v3	1	882	July 13, 2017
Center ion-buttons ionic-v3	1	345	July 19, 2021
How can i centerize icon inside ion-item? ionic-v3	1	507	September 5, 2023
How to centre a button? ionic-v3	24	98187	January 4, 2019
SASS Property for ionic toolbar text and button alignment ionic-v3	2	670	September 2, 2016

How to centralize ion-button into ion-buttons tag

Related topics