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.
angular · Dec 9, 2015 · 2b08f3a · 2b08f3a
1 parent 190d304
commit 2b08f3a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html b/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>
diff --git a/src/components/checkbox/demoSyncing/index.html b/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,11 +21,11 @@
     </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>
-            <div ng-repeat="item in items" class="standard" flex="50">
+            <div ng-repeat="item in items" cl   ass="standard" flex="50">
               <label>
                 <input type="checkbox" ng-checked="exists(item, selected)"
                        ng-click="toggle(item, selected)"/>
@@ -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>
diff --git a/src/components/dialog/demoOpenFromCloseTo/index.html b/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.

diff --git a/src/core/services/layout/layout.scss b/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; flex-shrink: 0;  }
+  .layout#{$name}-row    {  flex-direction: row;                     }
 }
 
 @mixin flex-properties-for-name($name: null) {
@@ -125,12 +125,13 @@
     $name : '';
   }
 
-  .#{$flexName}             { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;
+  .#{$flexName}             { flex: 1 1 0%;    box-sizing: border-box; }  // === 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 {