Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(layout): 'flex' change per recommended workarounds #6205

Closed
wants to merge 5 commits into from

Conversation

ThomasBurleson
Copy link
Contributor

Per recommended 'flex' settings for Chrome and IE workarounds:

  • 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' API to symmetrically balance the API 'flex-noshrink'
  • fix BottomSheet Grid and Checkbox demos with layout; works properly in Safari now (in xs and sm modes).

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.
@ThomasBurleson
Copy link
Contributor Author

@jelbourn, @topherfangio, @robertmesserle - please review asap!

@ThomasBurleson ThomasBurleson added this to the 1.0-rc8 milestone Dec 9, 2015
@ThomasBurleson ThomasBurleson self-assigned this Dec 9, 2015
@devversion
Copy link
Member

@ThomasBurleson Hey Thomas, I think you missed, adding the nogrow element to the options array

var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink'];

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')`
@ThomasBurleson
Copy link
Contributor Author

@devversion - Nice job. Thank you sir.

<fieldset class="standard">
<legend>Using <code>&lt;input type="checkbox"&gt;</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">
Copy link
Member

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%;
}
}
Copy link
Contributor Author

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 .

Copy link
Member

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')`
@jelbourn
Copy link
Member

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')`
@Splaktar
Copy link
Member

This didn't include the new nogrow in the docs. PR #6307 adds this.

Splaktar added a commit that referenced this pull request Dec 21, 2015
@EladBezalel EladBezalel deleted the fix/layout_flex branch January 15, 2016 22:59
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants