fix(fxFlex): fix wrapping in older versions of Safari

* add flex basis back if either max or min width/height is set * related: https://github.com/philipwalton/flexbugs#flexbug-11 * fix demo-app height issue with older Safari * update tests to reflect new behavior
angular · Mar 14, 2018 · 3809608 · 3809608
1 parent 2079aea
commit 3809608
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git a/src/apps/demo-app/src/app/github-issues/issue-266/issue-266.component.html b/src/apps/demo-app/src/app/github-issues/issue-266/issue-266.component.html
@@ -17,7 +17,7 @@
         <div class="handle handle-row" ngxSplitHandle>
           <i class="material-icons">&#xE25D;</i>
         </div>
-        <div fxFlex.xs="70%" fxFlex.gt-md="50%" fxFlex.lg="60%" ngxSplitArea>
+        <div fxFlex.xs="70%" fxFlex.gt-md="50%" fxFlex.lg="60%" ngxSplitArea style="height:500px;">
           <div fxLayout="column" fxFlexFill ngxSplit="column">
             <div fxFlex="50%" ngxSplitArea class="c2r1_body">
               <div class="c2r1_header">Column #2 - Row #1</div>

diff --git a/src/lib/flex/flex-offset/flex-offset.spec.ts b/src/lib/flex/flex-offset/flex-offset.spec.ts
@@ -86,7 +86,7 @@ describe('flex-offset directive', () => {
     it('should work with percentage values', () => {
       componentWithTemplate(`<div fxFlexOffset='17' fxFlex='37'></div>`);
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex': '1 1 37%',
         'box-sizing': 'border-box',
         'margin-left': '17%'
       }, styler);

diff --git a/src/lib/flex/flex/flex.spec.ts b/src/lib/flex/flex/flex.spec.ts
@@ -190,15 +190,15 @@ describe('flex directive', () => {
       fixture.detectChanges();
       expectNativeEl(fixture).toHaveStyle({
         'max-width': '2%',
-        'flex': '1 1 100%',
+        'flex': '1 1 2%',
         'box-sizing': 'border-box',
       }, styler);
     });
 
     it('should work with percentage values', () => {
       componentWithTemplate(`<div fxFlex='37%'></div>`);
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex': '1 1 37%',
         'max-width': '37%',
         'box-sizing': 'border-box',
       }, styler);
@@ -456,7 +456,7 @@ describe('flex directive', () => {
         expectNativeEl(fixture)
             .not.toHaveStyle({
           'flex-direction': 'row',
-          'flex': '1 1 100%',
+          'flex': '1 1 37%',
           'max-height': '37%',
         }, styler);
       });
@@ -472,23 +472,23 @@ describe('flex directive', () => {
         fixture.detectChanges();
         expectEl(queryFor(fixture, '[fxFlex]')[0])
           .toHaveStyle({
-            'flex': '1 1 100%',
+            'flex': '1 1 37%',
             'max-height': '37%',
           }, styler);
       });
 
       it('should set max-width for `fxFlex="<%val>"`', () => {
         componentWithTemplate(`<div fxFlex='37%'></div>`);
         expectNativeEl(fixture).toHaveStyle({
-          'flex': '1 1 100%',
+          'flex': '1 1 37%',
           'max-width': '37%',
         }, styler);
       });
 
       it('should set max-width for `fxFlex="2%"` usage', () => {
         componentWithTemplate(`<div fxFlex='2%'></div>`);
         expectNativeEl(fixture).toHaveStyle({
-          'flex': '1 1 100%',
+          'flex': '1 1 2%',
           'max-width': '2%',
         }, styler);
       });
@@ -510,15 +510,15 @@ describe('flex directive', () => {
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex': '1 1 50%',
         'max-width': '50%'
       }, styler);
 
       matchMedia.activate('sm', true);
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex': '1 1 33%',
         'max-width': '33%'
       }, styler);
     });
@@ -546,9 +546,9 @@ describe('flex directive', () => {
       fixture.detectChanges();
 
       nodes = queryFor(fixture, '[fxFlex]');
-      expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
-      expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
-      expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
+      expectEl(nodes[0]).toHaveStyle({'flex': '1 1 50%', 'max-height': '50%'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'flex': '1 1 24.4%', 'max-height': '24.4%'}, styler);
+      expectEl(nodes[2]).toHaveStyle({'flex': '1 1 25.6%', 'max-height': '25.6%'}, styler);
 
       matchMedia.activate('sm');
       fixture.detectChanges();
@@ -597,9 +597,9 @@ describe('flex directive', () => {
       fixture.detectChanges();
       nodes = queryFor(fixture, '[fxFlex]');
 
-      expectEl(nodes[0]).toHaveStyle({'flex': '1 1 100%', 'max-height': '50%'}, styler);
-      expectEl(nodes[1]).toHaveStyle({'flex': '1 1 100%', 'max-height': '24.4%'}, styler);
-      expectEl(nodes[2]).toHaveStyle({'flex': '1 1 100%', 'max-height': '25.6%'}, styler);
+      expectEl(nodes[0]).toHaveStyle({'flex': '1 1 50%', 'max-height': '50%'}, styler);
+      expectEl(nodes[1]).toHaveStyle({'flex': '1 1 24.4%', 'max-height': '24.4%'}, styler);
+      expectEl(nodes[2]).toHaveStyle({'flex': '1 1 25.6%', 'max-height': '25.6%'}, styler);
     });
 
     it('should fallback to the default layout from lt-md selectors', () => {
@@ -621,7 +621,7 @@ describe('flex directive', () => {
       nodes = queryFor(fixture, '[fxFlex]');
 
       expectEl(nodes[0]).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex': '1 1 50%',
         'max-height': '50%'
       }, styler);
 

diff --git a/src/lib/flex/flex/flex.ts b/src/lib/flex/flex/flex.ts
@@ -286,6 +286,11 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
           'flex': `${grow} ${shrink} ${basis}`
         });
       }
+    } else {
+      // Fix for issue 660
+      css[hasCalc ? 'flex-basis' : 'flex'] = css[max] ?
+        (hasCalc ? css[max] : `${grow} ${shrink} ${css[max]}`) :
+        (hasCalc ? css[min] : `${grow} ${shrink} ${css[min]}`);
     }
 
     return extendObject(css, {'box-sizing': 'border-box'});

diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts
@@ -20,12 +20,8 @@ task(':watch:devapp', () => {
    watchFiles(join(flexLayoutPackage.sourceDir, '**/!(*.scss)'), ['flex-layout:build-no-bundles']);
 });
 
-task('devapp:deps', execTask(
-  'npm', ['install'], {cwd: appDir}
-));
-
 task(':serve:devapp', ['aot:pre'], execTask(
-  'ng', ['serve'],
+  'ng', ['serve', '--port', '4000'],
   {cwd: appDir, failOnStderr: true}
 ));