Merge pull request #1035 from oliviertassinari/text-field-fix

[TextField] fix the floating label and hint text position
mui · Jul 4, 2015 · f20a185 · f20a185
2 parents 5345419 + 1c1e75b
commit f20a185
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
@@ -314,6 +314,14 @@ let TextFieldsPage = React.createClass({
               style={styles.textfield}
               hintText="Hint Text (MultiLine)"
               multiLine={true} /><br/>
+            <TextField
+              style={styles.textfield}
+              hintText="The hint text can be as long as you want, it will wrap."
+              multiLine={true} /><br/>
+            <TextField
+              style={styles.textfield}
+              hintText="Hint Text"
+              errorText="The error text can be as long as you want, it will wrap." /><br/>
             <TextField
               style={styles.textfield}
               hintText="Hint Text"

diff --git a/src/text-field.jsx b/src/text-field.jsx
@@ -108,11 +108,11 @@ let TextField = React.createClass({
       },
       hint: {
         position: 'absolute',
-        lineHeight: '20px',
+        lineHeight: '22px',
         opacity: 1,
         color: theme.hintColor,
         transition: Transitions.easeOut(),
-        bottom: '10px'
+        bottom: 12
       },
       input: {
         WebkitTapHighlightColor: 'rgba(0,0,0,0)',
@@ -148,8 +148,9 @@ let TextField = React.createClass({
     };
 
     styles.floatingLabel = this.mergeStyles(styles.hint, {
-      lineHeight: '20px',
+      lineHeight: '22px',
       top: 38,
+      bottom: 'none',
       opacity: 1,
       transform: 'scale(1) translate3d(0, 0, 0)',
       transformOrigin: 'left top'
@@ -182,7 +183,6 @@ let TextField = React.createClass({
     }
 
     if (props.floatingLabelText) {
-      styles.hint.top = 24;
       styles.hint.opacity = 0;
       styles.input.boxSizing = 'border-box';
       if (this.state.isFocused && !this.state.hasValue) styles.hint.opacity = 1;