复选框警报控制器 - 添加 3 个按钮

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.

解决方案

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).