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

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 @@
   }
 
 }
+