Jignesh Jignesh - 1 year ago 187
TypeScript Question

Checkbox Alert Controller - Add 3 Buttons

I make one application with IONIC-2 Beta version. i 'm use Checkbox Alert Controller, and add two buttons "Okay" And "Cancel", Now i need to add one more button in Alert Controller. i implement below to add one more button.

text: 'Info',
role: 'info',
handler: data => {
text: 'Okay',
handler: data => {

It's work good but it will align vertically like below,

It look like

But, i want to align it in horizontally.

If anyone knows the solution, please help me.


Answer Source

You can use a few css rules to achieve that. Please take a look at this plunker.

Since the buttons are being aligned by using flexbox, we can overwrite some of those css rules to be able to include three buttons in the modal instead of two. First, please notice that I added a custom css class (custom-alert) to the alert, so our css rules will affect this alert only:

let alert = this.alertCtrl.create({
      cssClass: 'custom-alert',

And then:

.custom-alert button.alert-button {
    width: 33.33%;

.custom-alert .alert-button .button-inner {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

.custom-alert .alert-button-group.vertical {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row ;

The magic is being done by setting the width to 33.33% to allow the buttons to fit in the same row, and then adding flex-direction: row to the container instead of the column value per default (that's why in your screenshot the buttons are in a column display).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download