From 9ede6f41cd69e7c0e2bcf9a25dc3ce20ae40aae5 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Sun, 31 Jan 2016 15:36:56 +0100
Subject: [PATCH] Fixes alertview when displaying more than 2 buttons

---
 ionic/components/alert/alert.md.scss        |  1 +
 ionic/components/alert/alert.scss           |  5 +++++
 ionic/components/alert/alert.ts             |  2 +-
 ionic/components/alert/test/basic/index.ts  | 19 +++++++++++++++++++
 ionic/components/alert/test/basic/main.html |  5 +++--
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
index ddf1497370..9661389f6a 100644
--- a/ionic/components/alert/alert.md.scss
+++ b/ionic/components/alert/alert.md.scss
@@ -223,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 {
         '</template>' +
 
       '</div>' +
-      '<div class="alert-button-group">' +
+      '<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
         '<button *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
           '{{b.text}}' +
         '</button>' +
diff --git a/ionic/components/alert/test/basic/index.ts b/ionic/components/alert/test/basic/index.ts
index 658971ddc9..cf734e2e21 100644
--- a/ionic/components/alert/test/basic/index.ts
+++ b/ionic/components/alert/test/basic/index.ts
@@ -51,6 +51,25 @@ class E2EPage {
     });
   }
 
+  doAlertLongMessage() {
+    let alert = Alert.create({
+      title: 'Alert',
+      message: 'Message <strong>text</strong>!!!',
+      buttons: ['Cancel', 'Continue to grant access']
+    });
+    this.nav.present(alert);
+  }
+
+  doMultipleButtons() {
+    let alert = Alert.create({
+      title: 'Alert',
+      subTitle: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['Cancel', 'Continue', 'Delete']
+    });
+    this.nav.present(alert);
+  }
+
   doPrompt() {
     let alert = Alert.create();
     alert.setTitle('Prompt!');
diff --git a/ionic/components/alert/test/basic/main.html b/ionic/components/alert/test/basic/main.html
index f359df4e55..fc742a9cec 100644
--- a/ionic/components/alert/test/basic/main.html
+++ b/ionic/components/alert/test/basic/main.html
@@ -1,4 +1,3 @@
-
 <ion-navbar *navbar>
   <ion-title>Alerts</ion-title>
 </ion-navbar>
@@ -6,6 +5,8 @@
 <ion-content padding>
 
   <button block class="e2eOpenAlert" (click)="doAlert()">Alert</button>
+  <button block class="e2eOpenAlertLongMessage" (click)="doAlertLongMessage()">Alert Long Message</button>
+  <button block class="e2eOpenMultipleButtons" (click)="doMultipleButtons()">Multiple Buttons (>2)</button>
   <button block class="e2eOpenConfirm" (click)="doConfirm()">Confirm</button>
   <button block class="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>
   <button block class="e2eOpenRadio" (click)="doRadio()">Radio</button>
@@ -23,4 +24,4 @@
     Checkbox Result: {{testCheckboxResult}}
   </pre>
 
-</ion-content>
+</ion-content>
\ No newline at end of file