fix(alert): add padding under the alert title for iOS when there is no message

closes #5299

Author: brandyscarney

ionic/components/alert/alert.ios.scss

@@ -94,6 +94,12 @@ ion-alert {
   text-align: $alert-ios-message-text-align;
 }
 
+.alert-message {
+  &:empty {
+    padding: 0 0 12px 0;
+  }
+}
+
 
 // iOS Alert Input
 // --------------------------------------------------

ionic/components/alert/alert.md.scss

@@ -69,6 +69,10 @@ $alert-md-buttons-justify-content:        flex-end !default;
 
 .alert-message {
   font-size: $alert-md-message-font-size;
+
+  &:empty {
+    padding: 0;
+  }
 }
 
 

ionic/components/alert/alert.scss

@@ -52,10 +52,6 @@ ion-alert {
 
 .alert-message {
   overflow: auto;
-
-  &:empty {
-    padding: 0;
-  }
 }
 
 .alert-input {

ionic/components/alert/alert.ts

@@ -248,7 +248,7 @@ export class Alert extends ViewController {
         '<h2 id="{{hdrId}}" class="alert-title" *ngIf="d.title" [innerHTML]="d.title"></h2>' +
         '<h3 id="{{subHdrId}}" class="alert-sub-title" *ngIf="d.subTitle" [innerHTML]="d.subTitle"></h3>' +
       '</div>' +
-      '<div id="{{msgId}}" class="alert-message" *ngIf="d.message" [innerHTML]="d.message"></div>' +
+      '<div id="{{msgId}}" class="alert-message" [innerHTML]="d.message"></div>' +
       '<div *ngIf="d.inputs.length" [ngSwitch]="inputType">' +
 
         '<template ngSwitchWhen="radio">' +
@@ -335,6 +335,10 @@ class AlertCmp {
     } else if (this.d.subTitle) {
       this.descId = this.subHdrId;
     }
+
+    if (!this.d.message) {
+      this.d.message = '';
+    }
   }
 
   onPageLoaded() {

ionic/components/alert/test/basic/index.ts

@@ -59,7 +59,7 @@ class E2EPage {
     this.nav.present(alert);
   }
 
-  doAlertNoBody() {
+  doAlertNoMessage() {
     let alert = Alert.create({
       title: 'Alert',
       buttons: ['OK']

ionic/components/alert/test/basic/main.html

@@ -7,7 +7,7 @@
   <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="e2eOpenAlertNoBody" (click)="doAlertNoBody()">Alert No Body</button>
+  <button block class="e2eOpenAlertNoMessage" (click)="doAlertNoMessage()">Alert No Message</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>