Merge pull request #1041 from melloware/PR1040

Fix #1040: InputTextArea floating label CSS.
primefaces · Oct 14, 2019 · 60c0fa4 · 60c0fa4
2 parents bfa0d51 + 656c857
commit 60c0fa4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
@@ -176,4 +176,24 @@ button {
 
 .p-toggleable-content-exit-done {
     display: none;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position:relative; 
+}
+
+.p-float-label label {
+  font-weight:normal;
+  position:absolute;
+  pointer-events:none;
+  left: .25em;
+  top: 50%;
+  margin-top: -.5em;
+  transition: 0.3s ease all; 
+  -moz-transition: 0.3s ease all; 
+  -webkit-transition: 0.3s ease all;
+  color: #898989;
+  line-height: 1;
 }
diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
@@ -89,25 +89,6 @@
 }
 
 /* Floating Label */
-.p-float-label {
-    display: block;
-    position:relative; 
-}
-
-.p-float-label label {
-  font-weight:normal;
-  position:absolute;
-  pointer-events:none;
-  left: .25em;
-  top: 50%;
-  margin-top: -.5em;
-  transition: 0.3s ease all; 
-  -moz-transition: 0.3s ease all; 
-  -webkit-transition: 0.3s ease all;
-  color: #898989;
-  line-height: 1;
-}
-
 .p-float-label input:focus ~ label,
 .p-float-label input.p-filled ~ label,
 .p-float-label .p-inputwrapper-focus ~ label,

diff --git a/src/components/inputtextarea/InputTextarea.css b/src/components/inputtextarea/InputTextarea.css
@@ -5,4 +5,18 @@
 
 .p-fluid .p-inputtextarea {
     width: 100%;
+}
+
+/* Floating Label */
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+  top:-.75em;
+  font-size:12px;
+}
+
+.p-float-label .textarea:-webkit-autofill ~ label {
+  top:-20px;
+  font-size:12px;
 }