-
Notifications
You must be signed in to change notification settings - Fork 3.4k
fix(layout): 'flex' change per recommended workarounds #6205
Conversation
9c35f74
to
2b08f3a
Compare
Per recommended 'flex' settings for Chrome and IE [workarounds](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/): * use flex === `flex:1 1 0%` instead of `flex:1`. Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. * in layout="column" add `flex-shrink:0`. Chrome, Opera, and Safari do not honor the default min-content size of flex items. For column modes, set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage. * add 'flex-nogrow' to symmetrically balance 'flex-noshrink' * fix BottomSheet Grid, Checkbox, Dialog demos with layout.
2b08f3a
to
33dd0a1
Compare
@jelbourn, @topherfangio, @robertmesserle - please review asap! |
@ThomasBurleson Hey Thomas, I think you missed, adding the
|
Per recommended 'flex' settings for Chrome and IE [workarounds](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/): * use flex === `flex:1 1 0%` instead of `flex:1`. Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. * in layout="column" add `flex-shrink:0`. Chrome, Opera, and Safari do not honor the default min-content size of flex items. For column modes, set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage. * add 'flex-nogrow' to symmetrically balance 'flex-noshrink' * fix BottomSheet Grid, Checkbox, Dialog demos with layout. * fix Dialog Custom demo to use fullscreen for `$mdMedia('xs') || $mdMedia('sm')`
@devversion - Nice job. Thank you sir. |
<fieldset class="standard"> | ||
<legend>Using <code><input type="checkbox"></code></legend> | ||
<div layout="row" layout-wrap flex> | ||
<div ng-repeat="item in items" class="standard" flex="50"> | ||
<div ng-repeat="item in items" cl ass="standard" flex="50"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You got an extra tab in here or something.
Per recommended 'flex' settings for Chrome and IE [workarounds](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/): * use flex === `flex:1 1 0%` instead of `flex:1`. Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. * in layout="column" add `flex-shrink:0`. Chrome, Opera, and Safari do not honor the default min-content size of flex items. For column modes, set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage. * add 'flex-nogrow' to symmetrically balance 'flex-noshrink' * fix BottomSheet Grid, Checkbox, Dialog demos with layout. * fix Dialog Custom demo to use fullscreen for `$mdMedia('xs') || $mdMedia('sm')`
.flex, .flex-xs, .flex-gt-xs, .flex-sm, .flex-gt-sm, .flex-md, .flex-gt-md, .flex-lg, .flex-gt-lg, .flex-xl { | ||
flex: 1 1 0%; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jelbourn - this is intended as an hack for IE-only CSS .
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I still want more info commented on it.
Per recommended 'flex' settings for Chrome and IE [workarounds](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/): * use flex === `flex:1 1 0%` instead of `flex:1`. Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. * in layout="column" add `flex-shrink:0`. Chrome, Opera, and Safari do not honor the default min-content size of flex items. For column modes, set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage. * add 'flex-nogrow' to symmetrically balance 'flex-noshrink' * fix BottomSheet Grid, Checkbox, Dialog demos with layout. * fix Dialog Custom demo to use fullscreen for `$mdMedia('xs') || $mdMedia('sm')`
LGTM |
Per recommended 'flex' settings for Chrome and IE [workarounds](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/): * use flex === `flex:1 1 0%` instead of `flex:1`. Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error. * in layout="column" add `flex-shrink:0`. Chrome, Opera, and Safari do not honor the default min-content size of flex items. For column modes, set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage. * add 'flex-nogrow' to symmetrically balance 'flex-noshrink' * fix BottomSheet Grid, Checkbox, Dialog demos with layout. * fix Dialog Custom demo to use fullscreen for `$mdMedia('xs') || $mdMedia('sm')`
This didn't include the new |
Per recommended 'flex' settings for Chrome and IE workarounds:
flex:1 1 0%
instead offlex:1
. Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.flex-shrink:0
. Chrome, Opera, and Safari do not honor the default min-content size of flex items. For column modes, set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage.