updates Layout so mdl-layout is the root element (fixes google#1356)

tleunen · Feb 6, 2016 · 66e3be5 · 66e3be5
1 parent 394d550
commit 66e3be5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
@@ -39,14 +39,9 @@
 
 // Main layout class.
 .mdl-layout {
+  position: absolute;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative;
-  -webkit-overflow-scrolling: touch;
 }
 
 // Utility classes for screen sizes.
@@ -58,10 +53,15 @@
   display: none;
 }
 
-.mdl-layout__container {
-  position: absolute;
+.mdl-layout__inner-container {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
 }
 
 
@@ -166,7 +166,7 @@
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         transform: translateX(0);
       }
     }
@@ -214,7 +214,7 @@
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         display: none;
       }
 
@@ -255,13 +255,13 @@
       min-height: $layout-mobile-header-height;
     }
 
-    .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > & {
+    .mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen) > .mdl-layout__inner-container > & {
       margin-left: $layout-drawer-width;
       width: calc(100% - #{$layout-drawer-width});
     }
 
     @media screen and (min-width: $layout-screen-size-threshold + 1px) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         .mdl-layout__header-row {
           padding-left: 40px;
         }
@@ -309,7 +309,7 @@
         display: none;
       }
 
-      .mdl-layout--fixed-header > & {
+      .mdl-layout--fixed-header > .mdl-layout__inner-container > & {
         display: flex;
       }
     }
@@ -450,20 +450,20 @@
     z-index: 1;
     -webkit-overflow-scrolling: touch;
 
-    .mdl-layout--fixed-drawer > & {
+    .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
       margin-left: $layout-drawer-width;
     }
 
-    .mdl-layout__container.has-scrolling-header & {
+    .mdl-layout.has-scrolling-header & {
       overflow: visible;
     }
 
     @media screen and (max-width: $layout-screen-size-threshold) {
-      .mdl-layout--fixed-drawer > & {
+      .mdl-layout--fixed-drawer > .mdl-layout__inner-container > & {
         margin-left: 0;
       }
 
-      .mdl-layout__container.has-scrolling-header & {
+      .mdl-layout.has-scrolling-header & {
         overflow-y: auto;
         overflow-x: hidden;
       }
@@ -532,7 +532,7 @@
     flex-shrink: 0;
     overflow: hidden;
 
-    .mdl-layout__container > & {
+    .mdl-layout > .mdl-layout__inner-container > & {
       position: absolute;
       top: 0;
       left: 0;

diff --git a/src/layout/layout.js b/src/layout/layout.js
@@ -83,7 +83,7 @@
    * @private
    */
   MaterialLayout.prototype.CssClasses_ = {
-    CONTAINER: 'mdl-layout__container',
+    INNER_CONTAINER: 'mdl-layout__inner-container',
     HEADER: 'mdl-layout__header',
     DRAWER: 'mdl-layout__drawer',
     CONTENT: 'mdl-layout__content',
@@ -278,12 +278,6 @@
    */
   MaterialLayout.prototype.init = function() {
     if (this.element_) {
-      var container = document.createElement('div');
-      container.classList.add(this.CssClasses_.CONTAINER);
-      this.element_.parentElement.insertBefore(container, this.element_);
-      this.element_.parentElement.removeChild(this.element_);
-      container.appendChild(this.element_);
-
       var directChildren = this.element_.childNodes;
       var numChildren = directChildren.length;
       for (var c = 0; c < numChildren; c++) {
@@ -333,7 +327,7 @@
         } else if (this.header_.classList.contains(
             this.CssClasses_.HEADER_SCROLL)) {
           mode = this.Mode_.SCROLL;
-          container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
+          this.element_.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
         }
 
         if (mode === this.Mode_.STANDARD) {
@@ -486,6 +480,13 @@
         }
       }
 
+      var innerContainer = document.createElement('div');
+      innerContainer.classList.add(this.CssClasses_.INNER_CONTAINER);
+      while (this.element_.firstChild) {
+        innerContainer.appendChild(this.element_.firstChild);
+      }
+      this.element_.appendChild(innerContainer);
+
       this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
     }
   };