Checkbox Alert Controller - Add 3 Buttons

Question

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.

alert.addButton('Cancel');
 alert.addButton({
   text: 'Info',
   role: 'info',
   handler: data => {
     //this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
   }
 });
 alert.addButton({
   text: 'Okay',
   handler: data => {
     this.nav.push(DoubleMatPage,{"form_data":this.form_data,"offset":data});
   }
 });

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

But, i want to align it in horizontally.

If anyone knows the solution, please help me.

Thanks.

Answer 1

You can use a few css rules to achieve that.

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-group {
    width: 33.33%;
}

.custom-alert .alert-button-group .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).

Answer 2

Please take a look at the below code

presentConfirm() {
  let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      },
      {
        text: 'get',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.present();
}

To get a button in horizontal we need all the button inside a single array

But in your case you have 3 different array.

For more information about AlerControll check this link