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

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')`

Closes #6205.

src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html

@@ -2,14 +2,16 @@
  <div layout="row" layout-align="center center">
  <h4>With clickOutsideToClose option, drag down or press ESC to close</h4>
  </div>
- <md-list flex layout="row" layout-align="center center">
- <md-list-item ng-repeat="item in items">
+ <div>
+ <md-list flex layout="row" layout-align="center center">
+ <md-list-item ng-repeat="item in items">
 
- <md-button class="md-grid-item-content" ng-click="listItemClick($index)">
- <md-icon md-svg-src="{{item.icon}}"></md-icon>
- <div class="md-grid-text"> {{ item.name }} </div>
- </md-button>
+  <md-button class="md-grid-item-content" ng-click="listItemClick($index)">
+  <md-icon md-svg-src="{{item.icon}}"></md-icon>
+  <div class="md-grid-text"> {{ item.name }} </div>
+  </md-button>
 
- </md-list-item>
- </md-list>
+ </md-list-item>
+ </md-list>
+ </div>
 </md-bottom-sheet>

src/components/checkbox/demoBasicUsage/index.html

@@ -1,45 +1,50 @@
 
 <div ng-controller="AppCtrl" class="md-padding" ng-cloak>
- <fieldset class="standard">
- <legend>Using <code>ng-model</code></legend>
- <div layout="row" layout-wrap>
- <div flex="50">
- <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
- Checkbox 1: {{ data.cb1 }}
- </md-checkbox>
+ <div>
+ <fieldset class="standard">
+ <legend>Using <code>ng-model</code></legend>
+ <div layout="column" layout-wrap layout-gt-sm="row" >
+ <div flex-xs flex="50">
+ <md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
+ Checkbox 1: {{ data.cb1 }}
+ </md-checkbox>
+ </div>
+ <div flex-xs flex="50">
+ <div layout-xs="column" flex-xs="100">
+ <md-checkbox
+ ng-model="data.cb2"
+ aria-label="Checkbox 2"
+ ng-true-value="'yup'"
+ ng-false-value="'nope'"
+ class="md-warn md-align-top-left" flex>
+ Checkbox 2 (md-warn) <br/>
+ <span class="ipsum">
+ Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
+ Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
+ sit amet dapibus tortor ligula non nibh.
+ </span>
+ <br/>
+ {{ data.cb2 }}
+ </md-checkbox>
+ </div>
+ </div>
+ <div flex-xs flex="50">
+ <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
+ Checkbox: Disabled
+ </md-checkbox>
+ </div>
+ <div flex-xs flex="50">
+ <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
+ Checkbox: Disabled, Checked
+ </md-checkbox>
+ </div>
+ <div flex-xs flex="50">
+ <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
+ Checkbox (md-primary): No Ink
+ </md-checkbox>
+ </div>
  </div>
- <div flex="50">
- <md-checkbox
- ng-model="data.cb2"
- aria-label="Checkbox 2"
- ng-true-value="'yup'"
- ng-false-value="'nope'"
- class="md-warn md-align-top-left">
- Checkbox 2 (md-warn) <br/>
- <span class="ipsum">
- Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
- Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
- sit amet dapibus tortor ligula non nibh.
- </span>
- <br/>
- {{ data.cb2 }}
- </md-checkbox>
- </div>
- <div flex="50">
- <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
- Checkbox: Disabled
- </md-checkbox>
- </div>
- <div flex="50">
- <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
- Checkbox: Disabled, Checked
- </md-checkbox>
- </div>
- <div flex="50">
- <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
- Checkbox (md-primary): No Ink
- </md-checkbox>
- </div>
- </div>
- </fieldset>
+ </fieldset>
+
+ </div>
 </div>

src/components/checkbox/demoBasicUsage/style.css

@@ -1,3 +1,7 @@
+div.flex-xs {
+ min-height:40px;
+
+}
 .checkboxDemo1 div {
  clear: both;
 }

src/components/checkbox/demoSyncing/index.html

@@ -1,8 +1,8 @@
-<div ng-controller="AppCtrl" class="md-padding" ng-cloak style="height:250px">
+<div ng-controller="AppCtrl" class="md-padding" ng-cloak style="min-height:270px">
  <div layout="row" layout-wrap>
 
  <div flex="100" flex-gt-sm="50" layout="column">
- <div flex>
+ <div>
  <!--
  In IE, we cannot apply flex directly to <fieldset>
  @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
@@ -21,7 +21,7 @@
  </div>
 
  <div flex="100" flex-gt-sm="50" layout="column">
- <div flex>
+ <div >
  <fieldset class="standard">
  <legend>Using <code>&lt;input type="checkbox"&gt;</code></legend>
  <div layout="row" layout-wrap flex>
@@ -37,9 +37,11 @@
  </div>
  </div>
 
+ <div flex="100">
+ <h2 class="md-title">Selected Items</h2>
+ <code style="display: block; padding: 8px;">{{selected | json}}</code>
+ </div>
  </div>
 
- <h2 class="md-title">Selected Items</h2>
- <code style="display: block; padding: 8px;">{{selected | json}}</code>
 
 </div>

src/components/dialog/demoBasicUsage/index.html

@@ -5,19 +5,19 @@
  </p>
 
  <div class="dialog-demo-content" layout="row" layout-wrap layout-margin>
- <md-button class="md-primary md-raised" ng-click="showAlert($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
+ <md-button class="md-primary md-raised" ng-click="showAlert($event)"  flex="100"  flex-gt-md="auto">
  Alert Dialog
  </md-button>
- <md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
+ <md-button class="md-primary md-raised" ng-click="showConfirm($event)" flex="100"  flex-gt-md="auto">
  Confirm Dialog
  </md-button>
- <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
+ <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex="100" flex-gt-md="auto">
  Custom Dialog
  </md-button>
- <div hide-gt-sm layout="row" layout-align="center center" flex>
+ <div hide-gt-sm layout="row" layout-align="center center" flex="100">
  <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
  </div>
- <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
+ <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex="100" flex-gt-md="auto">
  Tab Dialog
  </md-button>
  </div>

src/components/dialog/demoBasicUsage/script.js

@@ -2,7 +2,7 @@ angular.module('dialogDemo1', ['ngMaterial'])
 
 .controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
  $scope.status = ' ';
- $scope.customFullscreen = $mdMedia('sm');
+ $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');
 
  $scope.showAlert = function(ev) {
  // Appending dialog to document.body to cover sidenav in docs app
@@ -38,13 +38,15 @@ angular.module('dialogDemo1', ['ngMaterial'])
  };
 
  $scope.showAdvanced = function(ev) {
+ var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
+
  $mdDialog.show({
  controller: DialogController,
  templateUrl: 'dialog1.tmpl.html',
  parent: angular.element(document.body),
  targetEvent: ev,
  clickOutsideToClose:true,
- fullscreen: $mdMedia('sm') && $scope.customFullscreen
+ fullscreen: useFullScreen
  })
  .then(function(answer) {
  $scope.status = 'You said the information was "' + answer + '".';
@@ -55,9 +57,9 @@ angular.module('dialogDemo1', ['ngMaterial'])
 
 
  $scope.$watch(function() {
- return $mdMedia('sm');
- }, function(sm) {
- $scope.customFullscreen = (sm === true);
+ return $mdMedia('xs') || $mdMedia('sm');
+ }, function(wantsFullScreen) {
+ $scope.customFullscreen = (wantsFullScreen === true);
  });
 
  };

src/components/dialog/demoOpenFromCloseTo/index.html

@@ -12,7 +12,7 @@
  <span id="left">left</span>
  </div>
 
- <div layout="column" layout-align="center start" layout-padding>
+ <div layout="column" layout-align="center start" layout-padding flex>
  <p class="inset">
  A dialog can specify its origin and target with <code>openFrom</code> and
  <code>closeTo</code> properties.

src/core/services/layout/layout.attributes.scss

@@ -135,6 +135,18 @@ $layout-breakpoint-lg: 1920px !default;
  }
 
  [#{$flexName}] { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
+
+ // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
+ // Details:
+ // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
+ // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
+ // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
+ @media screen\0 {
+ [#{$flexName}] {
+ flex: 1 1 0%;
+ }
+ }
+
  [#{$flexName}-grow] { flex: 1 1 100%; box-sizing: border-box; }
  [#{$flexName}-initial] { flex: 0 1 auto; box-sizing: border-box; }
  [#{$flexName}-auto] { flex: 1 1 auto; box-sizing: border-box; }

src/core/services/layout/layout.js

@@ -6,7 +6,7 @@
  var SUFFIXES = /(-gt)?-(sm|md|lg)/g;
  var WHITESPACE = /\s+/g;
 
- var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink'];
+ var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];
  var LAYOUT_OPTIONS = ['row', 'column'];
  var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];
  var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];

src/core/services/layout/layout.scss

@@ -112,8 +112,8 @@
  display: -ms-flexbox;
  display: flex;
  }
- .layout#{$name}-column { flex-direction: column; }
- .layout#{$name}-row { flex-direction: row; }
+ .layout#{$name}-column { flex-direction: column;  }
+ .layout#{$name}-row { flex-direction: row;  }
 }
 
 @mixin flex-properties-for-name($name: null) {
@@ -126,11 +126,25 @@
  }
 
  .#{$flexName} { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
+
+ // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
+ // Details:
+ // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
+ // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
+ // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
+ @media screen\0 {
+ .#{$flexName} {
+ flex: 1 1 0%;
+ }
+ }
+
+
  .#{$flexName}-grow { flex: 1 1 100%; box-sizing: border-box; }
  .#{$flexName}-initial { flex: 0 1 auto; box-sizing: border-box; }
  .#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
  .#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
  .#{$flexName}-noshrink { flex: 1 0 auto; box-sizing: border-box; }
+ .#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }
 
  // (1-20) * 5 = 0-100%
  @for $i from 0 through 20 {
@@ -510,3 +524,4 @@
  }
 
 }
+