From dd96369f525ff54924231ba520cbad3f4352c599 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 19 Oct 2018 17:15:22 +0200
Subject: [PATCH] fix(radio): improved alignment for native validation messages
 (#13570)

---
 src/lib/radio/radio.html | 26 +++++++++++++-------------
 src/lib/radio/radio.scss |  7 +++++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index 7dba9ee8d35..727a00624d5 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -14,20 +14,20 @@
 
       <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>
-  </div>
 
-  <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
-         [id]="inputId"
-         [checked]="checked"
-         [disabled]="disabled"
-         [tabIndex]="tabIndex"
-         [attr.name]="name"
-         [required]="required"
-         [attr.aria-label]="ariaLabel"
-         [attr.aria-labelledby]="ariaLabelledby"
-         [attr.aria-describedby]="ariaDescribedby"
-         (change)="_onInputChange($event)"
-         (click)="_onInputClick($event)">
+    <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
+        [id]="inputId"
+        [checked]="checked"
+        [disabled]="disabled"
+        [tabIndex]="tabIndex"
+        [attr.name]="name"
+        [required]="required"
+        [attr.aria-label]="ariaLabel"
+        [attr.aria-labelledby]="ariaLabelledby"
+        [attr.aria-describedby]="ariaDescribedby"
+        (change)="_onInputChange($event)"
+        (click)="_onInputClick($event)">
+  </div>
 
   <!-- The label content for radio control. -->
   <div class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 2ddc04c6e74..0d42d63d35a 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -152,3 +152,10 @@ $mat-radio-ripple-radius: 20px;
     opacity: 0;
   }
 }
+
+.mat-radio-input {
+  // Move the input in the middle and towards the bottom so
+  // the native validation messages are aligned correctly.
+  bottom: 0;
+  left: 50%;
+}