Ionic4 - How to align alert buttion in center?

Question

Just a quick fix but how do it center my buttons? I am using "alertCtrl.create"

also there does not seem to be some kind of centering in the alert ionic docs page.

https://ionicframework.com/docs/api/alert-controller

 alertCtrl.create ({  
    header: 'Invalid Input',
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

Answer 1

use mode md to ios because `mode='ios' by default we have the buttons in center.

alertCtrl.create ({  
    header: 'Invalid Input',
    mode:'ios', //by default you will get the button in center
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

Answer 2

You can also use a css custom class to center the button. When I tried mode: 'ios', it changed the native look of Android, and showed up like it would be in iOS.

When creating your alert, add a css class property:

alertCtrl.create ({  
    cssClass: 'my-alert', // Custom css class
    header: 'Invalid Input',
    message: 'Please enter correct details',
    buttons: ['Okay']
}).then(alertElement => alertElement.present());
    return;
}

And add my-alert class in your global.scss

.my-alert .alert-wrapper {      
    .alert-button-group {
      justify-content: center;
    }
  }