Check Validation Controller - Add 3 Buttons

Question

I am making one application with beta version of IONIC-2. I use the Checkbox Alert Controller and add two buttons "Good" and "Cancel". Now I need to add another button to the Alert Controller. Below I will add the following 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 works well, but it will align vertically as below,

But, I want to align it horizontally.

If anyone knows a solution, please help me.

Thanks.

Answer 1

To achieve this, you can use several CSS rules.

Since the buttons are aligned using flexbox, we can rewrite some of these css rules to be able to include three buttons in a modal instead of two. First, note that I have added custom css ( custom-alert ) code to the warning, so our CSS rules will only affect this warning:

 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 done by setting the width to 33.33% to allow the buttons to fit on the same line, and then adding flex-direction: row to the container instead of the default column value (so the buttons appear in the column in your screenshot).

Answer 2

Please take a look at the code below

 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 the button in the horizontal plane, we need the whole button inside one Array

But in your case you have 3 different arrays.

For more information on AlerControll, check out this link.