Fix vertical alignment of inline form units in IE [#153417045]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
pivotal-cf · Dec 7, 2017 · 05cb424 · 05cb424
1 parent 7188b21
commit 05cb424
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/spec/pivotal-ui-react/form/form-unit_spec.js b/spec/pivotal-ui-react/form/form-unit_spec.js
@@ -40,6 +40,10 @@ describe('FormUnit', () => {
       expect('.form-unit .grid:eq(0) > .col:eq(0)').toHaveText('Instance Name');
       expect('.form-unit .grid:eq(0) > .col:eq(1)').toHaveText('hello');
     });
+
+    it('applies the "inline-form-unit" class to the form unit', () => {
+      expect('.form-unit').toHaveClass('inline-form-unit');
+    });
   });
 
   describe('hideHelpRow', () => {

diff --git a/src/css/forms/forms.scss b/src/css/forms/forms.scss
@@ -492,6 +492,12 @@ textarea.valid {
     }
   }
 
+  &.inline-form-unit {
+    .field-row {
+      height: 32px;
+    }
+  }
+
   &.has-error {
     .help-row {
       color: $input-invalid-text;

diff --git a/src/react/forms/form-unit.js b/src/react/forms/form-unit.js
@@ -89,7 +89,7 @@ export class FormUnit extends React.Component {
     ) : sections;
 
     return (
-      <div className={classnames('form-unit', className, {'has-error': hasError})}>
+      <div className={classnames('form-unit', className, {'has-error': hasError, 'inline-form-unit': inline})}>
         {content}
         {helpRow}
       </div>