From e754e7df4232245ef63334287b530705daae4b36 Mon Sep 17 00:00:00 2001
From: Christian Oliff <christianoliff@yahoo.com>
Date: Thu, 22 Mar 2018 17:59:08 +0200
Subject: [PATCH] Fixes Edge and IE label overlapping issue

The 'Floating labels' example is only supported on Chrome, Safari and Firefox. On Edge and IE the label is displayed always and any text input overlaps the label which makes it unreadable.

The fix here targets Edge and IE and makes the form behave normally, the labels are hidden and the placeholder color is standard.
---
 .../floating-labels/floating-labels.css       | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/4.1/examples/floating-labels/floating-labels.css b/docs/4.1/examples/floating-labels/floating-labels.css
index 2c1d91bf36ad..a5634ab5f466 100644
--- a/docs/4.1/examples/floating-labels/floating-labels.css
+++ b/docs/4.1/examples/floating-labels/floating-labels.css
@@ -80,3 +80,25 @@ body {
   font-size: 12px;
   color: #777;
 }
+
+/* Fallback for Edge
+-------------------------------------------------- */
+@supports (-ms-ime-align: auto) {
+  .form-label-group > label {
+    display: none;
+  }
+  .form-label-group input::-ms-input-placeholder {
+    color: #777;
+  }
+}
+
+/* Fallback for IE
+-------------------------------------------------- */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .form-label-group > label {
+    display: none;
+  }
+  .form-label-group input:-ms-input-placeholder {
+    color: #777;
+  }
+}