diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss index f98b1738b8..6b93a28c46 100644 --- a/ionic/components/alert/alert.ios.scss +++ b/ionic/components/alert/alert.ios.scss @@ -212,9 +212,15 @@ ion-alert { // iOS Alert Button // -------------------------------------------------- +.alert-button-group { + flex-wrap: wrap; + margin-right: -1px; +} + .alert-button { margin: 0; - flex: 1; + flex: 1 1 auto; + min-width: 50%; font-size: $alert-ios-button-font-size; min-height: $alert-ios-button-min-height; border-radius: $alert-ios-button-border-radius; diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss index d4f504aaa0..9661389f6a 100644 --- a/ionic/components/alert/alert.md.scss +++ b/ionic/components/alert/alert.md.scss @@ -211,6 +211,7 @@ $alert-md-buttons-justify-content: flex-end !default; .alert-button-group { padding: $alert-md-buttons-padding; justify-content: $alert-md-buttons-justify-content; + flex-wrap: wrap-reverse; } .alert-button { @@ -222,6 +223,7 @@ $alert-md-buttons-justify-content: flex-end !default; background-color: $alert-md-button-background-color; border-radius: $alert-md-button-border-radius; text-transform: uppercase; + text-align: right; &.activated { opacity: 1; diff --git a/ionic/components/alert/alert.scss b/ionic/components/alert/alert.scss index b775338754..a1364e3441 100644 --- a/ionic/components/alert/alert.scss +++ b/ionic/components/alert/alert.scss @@ -69,6 +69,11 @@ ion-alert { .alert-button-group { display: flex; flex-direction: row; + + &.vertical { + flex-direction: column; + flex-wrap: nowrap; + } } .alert-button { diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index 2721c06657..40e8708d07 100644 --- a/ionic/components/alert/alert.ts +++ b/ionic/components/alert/alert.ts @@ -277,7 +277,7 @@ export class Alert extends ViewController { '' + '' + - '