[InputAdornment] Fix flexbox alignment bug for IE (mui#12975)

* InputAdornment: Fix flexbox alignment bug for IE * let's merge
marcelpanse · Oct 2, 2018 · 701264e · 701264e
1 parent a5d9ba8
commit 701264e
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.js
@@ -18,7 +18,7 @@ const styles = theme => ({
     margin: theme.spacing.unit,
   },
   textField: {
-    flexBasis: 280,
+    flexBasis: 200,
   },
 });
 

diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
@@ -18,7 +18,7 @@ const styles = theme => ({
     margin: theme.spacing.unit,
   },
   textField: {
-    flexBasis: 280,
+    flexBasis: 200,
   },
 });
 

diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js
@@ -8,6 +8,7 @@ export const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'flex',
+    height: '0.01em', // Fix IE 11 flexbox alignment. To remove at some point.
     maxHeight: '2em',
     alignItems: 'center',
   },

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
@@ -75,7 +75,7 @@ export const styles = theme => {
       display: 'block',
       // Make the flex item shrink with Firefox
       minWidth: 0,
-      flexGrow: 1,
+      width: '100%', // Fix IE11 width issue
       '&::-webkit-input-placeholder': placeholder,
       '&::-moz-placeholder': placeholder, // Firefox 19+
       '&:-ms-input-placeholder': placeholder, // IE 11