fix(layout): prevent layout expansion when some child with overflow:h…

…idden has an element with width larger than layout width
akveo · Oct 26, 2017 · bcbfcc0 · bcbfcc0
1 parent 3e2d582
commit bcbfcc0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/e2e/layout.e2e-spec.ts b/e2e/layout.e2e-spec.ts
@@ -117,4 +117,42 @@ describe('nb-layout', () => {
         expect(value).toMatch('content center');
       });
   });
+
+  it('should prevent column expansion if child content is too long in fixed layout', () => {
+
+    const content =  element(by.css('#layout-center > .scrollable-container > .layout > .layout-container > .content'));
+    element
+      .all(
+        by.css(`#layout-center >
+     .scrollable-container > .layout > .layout-container > .content > .columns > nb-layout-column`),
+      )
+      .get(2)
+      .getSize()
+      .then(size => {
+
+        content.getSize().then(contentSize => {
+          // one third of the content widht (as we have 3 columns)
+          expect(size.width).toEqual(Math.ceil(contentSize.width / 3));
+        })
+      });
+  });
+
+  it('should prevent column expansion if child content is too long in fluid layout', () => {
+
+    const content =  element(by.css('#layout-fluid > .scrollable-container > .layout > .layout-container > .content'));
+    element
+      .all(
+        by.css(`#layout-fluid >
+     .scrollable-container > .layout > .layout-container > .content > .columns > nb-layout-column`),
+      )
+      .get(2)
+      .getSize()
+      .then(size => {
+
+        content.getSize().then(contentSize => {
+          // one third of the content widht (as we have 3 columns)
+          expect(size.width).toEqual(Math.ceil(contentSize.width / 3));
+        })
+      });
+  });
 });
diff --git a/src/app/layout-test/layout-test.component.ts b/src/app/layout-test/layout-test.component.ts
@@ -35,7 +35,10 @@ import { Component } from '@angular/core';
         Center
       </nb-layout-column>
       <nb-layout-column>
-        Right
+        Right<br>
+        <div style="overflow: hidden">
+          <div style="width: 20000px; background: red;">super long </div>
+        </div>
       </nb-layout-column>
 
       <nb-layout-footer>
@@ -55,7 +58,10 @@ import { Component } from '@angular/core';
         Center
       </nb-layout-column>
       <nb-layout-column>
-        Right
+        Right<br>
+        <div style="overflow: hidden">
+          <div style="width: 20000px; background: red;">super long </div>
+        </div>
       </nb-layout-column>
 
       <nb-layout-footer fixed>

diff --git a/src/framework/theme/components/layout/layout.component.scss b/src/framework/theme/components/layout/layout.component.scss
@@ -55,6 +55,7 @@
       flex: 1;
       -ms-flex: 1 1 auto;
       flex-direction: column;
+      min-width: 0;
 
       &.center {
         max-width: 100%;
@@ -68,11 +69,12 @@
         flex: 1;
         -ms-flex: 1 1 auto;
         flex-direction: row;
+        width: 100%;
 
         /deep/ nb-layout-column {
           order: 2;
           flex: 1 0;
-
+          width:  0; // this might be a strange workaround
           &.left {
             order: 1;
           }