diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss index de8fc0c..0768839 100644 --- 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; } diff --git a/src/layout/layout.js b/src/layout/layout.js index b479f90..e30c4b1 100644 --- a/src/layout/layout.js +++ b/src/layout/layout.js @@ -84,7 +84,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', @@ -281,15 +281,8 @@ */ MaterialLayout.prototype.init = function() { if (this.element_) { - var container = document.createElement('div'); - container.classList.add(this.CssClasses_.CONTAINER); - var focusedElement = this.element_.querySelector(':focus'); - this.element_.parentElement.insertBefore(container, this.element_); - this.element_.parentElement.removeChild(this.element_); - container.appendChild(this.element_); - if (focusedElement) { focusedElement.focus(); } @@ -343,7 +336,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) { @@ -368,20 +361,16 @@ // Add drawer toggling button to our layout, if we have an openable drawer. if (this.drawer_) { - var drawerButton = this.element_.querySelector('.' + - this.CssClasses_.DRAWER_BTN); - if (!drawerButton) { - drawerButton = document.createElement('div'); - drawerButton.setAttribute('aria-expanded', 'false'); - drawerButton.setAttribute('role', 'button'); - drawerButton.setAttribute('tabindex', '0'); - drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); - - var drawerButtonIcon = document.createElement('i'); - drawerButtonIcon.classList.add(this.CssClasses_.ICON); - drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON; - drawerButton.appendChild(drawerButtonIcon); - } + var drawerButton = document.createElement('div'); + drawerButton.setAttribute('aria-expanded', 'false'); + drawerButton.setAttribute('role', 'button'); + drawerButton.setAttribute('tabindex', '0'); + drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); + + var drawerButtonIcon = document.createElement('i'); + drawerButtonIcon.classList.add(this.CssClasses_.ICON); + drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON; + drawerButton.appendChild(drawerButtonIcon); if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) { //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well. @@ -511,6 +500,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); } };