From 701264edd85376f6440ded5d7a02dba8c242f6ec Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 23 Sep 2018 17:45:03 +0200 Subject: [PATCH] [InputAdornment] Fix flexbox alignment bug for IE (#12975) * InputAdornment: Fix flexbox alignment bug for IE * let's merge --- docs/src/pages/demos/text-fields/FilledInputAdornments.js | 2 +- docs/src/pages/demos/text-fields/OutlinedInputAdornments.js | 2 +- packages/material-ui/src/InputAdornment/InputAdornment.js | 1 + packages/material-ui/src/InputBase/InputBase.js | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.js index 2ebc27a1a93043..96b9234268f959 100644 --- 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 index 2fd7c539f40739..82fe328588282d 100644 --- 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 index 22499a613886e3..0ca276aecbbe1b 100644 --- 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 index dccc7073f5dedd..4cd2769f84409c 100644 --- 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