fix(QLayout): Containerized -- fixing scrollbar

Author: rstoenescu

dev/components/components/layout-container.vue

@@ -7,6 +7,7 @@
         <q-toolbar>
           <q-btn flat @click="drawer = !drawer" round dense icon="menu" />
           <q-toolbar-title>Header</q-toolbar-title>
+          <q-btn flat @click="drawer = !drawer" round dense icon="menu" />
         </q-toolbar>
       </q-layout-header>
 
@@ -21,7 +22,7 @@
         <div v-for="n in 50" :key="n">Drawer</div>
       </q-layout-drawer>
       <q-page-container>
-        <q-page style="padding-top: 50px">
+        <q-page style="padding-top: 50px" class="bg-yellow">
           <div v-for="n in 50" :key="n">My page My page My page My page My page My page My page My page My page</div>
 
           <q-page-sticky position="top-left" :offset="[18, 58]">
@@ -69,7 +70,7 @@
         </q-layout-drawer>
 
         <q-page-container>
-          <q-page style="padding-top: 50px">
+          <q-page style="padding-top: 50px" class="bg-yellow">
             <div v-for="n in 50" :key="n">My page</div>
 
             <q-page-sticky position="top-left" :offset="[18, 58]">

src/components/layout/QLayout.js

@@ -1,6 +1,7 @@
 import QScrollObservable from '../observables/QScrollObservable.js'
 import QResizeObservable from '../observables/QResizeObservable.js'
 import { onSSR } from '../../plugins/platform.js'
+import { getScrollbarWidth } from 'utils/scroll.js'
 
 export default {
   name: 'QLayout',
@@ -19,6 +20,7 @@ export default {
   },
   data () {
     return {
+      // page related
       height: onSSR ? 0 : window.innerHeight,
       width: onSSR ? 0 : window.innerWidth,
 
@@ -60,6 +62,27 @@ export default {
         middle: rows[1].split(''),
         bottom: rows[2].split('')
       }
+    },
+
+    // used by container only
+    scrollbarWidth () {
+      return this.height > this.containerHeight
+        ? getScrollbarWidth()
+        : 0
+    },
+    targetStyle () {
+      if (this.scrollbarWidth !== 0) {
+        return { [this.$q.i18n.rtl ? 'left' : 'right']: `${this.scrollbarWidth}px` }
+      }
+    },
+    targetChildStyle () {
+      if (this.scrollbarWidth !== 0) {
+        return {
+          [this.$q.i18n.rtl ? 'right' : 'left']: 0,
+          [this.$q.i18n.rtl ? 'left' : 'right']: `-${this.scrollbarWidth}px`,
+          width: `calc(100% + ${this.scrollbarWidth}px)`
+        }
+      }
     }
   },
   created () {
@@ -76,22 +99,27 @@ export default {
         on: { scroll: this.__onPageScroll }
       }),
       h(QResizeObservable, {
-        on: { resize: this.__onLayoutResize }
+        on: { resize: this.__onPageResize }
       }),
       this.$slots.default
     ])
 
     return this.container
       ? h('div', {
-        staticClass: 'relative-position overflow-hidden q-layout-container'
+        staticClass: 'q-layout-container relative-position overflow-hidden'
       }, [
         h(QResizeObservable, {
           on: { resize: this.__onContainerResize }
         }),
         h('div', {
-          ref: 'content',
-          staticClass: 'fullscreen overflow-auto z-inherit'
-        }, [ layout ])
+          staticClass: 'absolute-full',
+          style: this.targetStyle
+        }, [
+          h('div', {
+            staticClass: 'overflow-auto',
+            style: this.targetChildStyle
+          }, [ layout ])
+        ])
       ])
       : layout
   },
@@ -112,7 +140,7 @@ export default {
       this.scroll = data
       this.$emit('scroll', data)
     },
-    __onLayoutResize ({ height, width }) {
+    __onPageResize ({ height, width }) {
       let resized = false
 
       if (this.height !== height) {

src/components/layout/QPage.js

@@ -18,9 +18,15 @@ export default {
         (this.layout.header.space ? this.layout.header.size : 0) +
         (this.layout.footer.space ? this.layout.footer.size : 0)
 
-      return typeof this.styleFn === 'function'
-        ? this.styleFn(offset)
-        : { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
+      if (typeof this.styleFn === 'function') {
+        return this.styleFn(offset)
+      }
+
+      const minHeight = this.layout.container
+        ? (this.layout.containerHeight - offset) + 'px'
+        : (offset ? `calc(100vh - ${offset}px)` : `100vh`)
+
+      return { minHeight }
     },
     classes () {
       if (this.padding) {

src/components/layout/layout.ios.styl

@@ -5,9 +5,13 @@ $layout-transition = all .12s ease-in
   min-height 100vh
 
 .q-layout-container
-  transform translate3d(0, 0, 0)
   .q-layout
-    min-height 0
+    min-height 100%
+  > div
+    transform translate3d(0, 0, 0)
+    > div
+      min-height 0
+      max-height 100%
 
 .q-layout-header
   border-bottom $layout-border
@@ -69,7 +73,7 @@ $layout-transition = all .12s ease-in
 
 .q-layout-drawer-opener
   z-index ($z-marginals + 1)
-  height 100vh
+  height 100%
   width 15px
 
 .q-page-sticky-shrink

src/components/layout/layout.mat.styl

@@ -5,9 +5,13 @@ $layout-transition = all .12s ease-in
   min-height 100vh
 
 .q-layout-container
-  transform translate3d(0, 0, 0)
   .q-layout
-    min-height 0
+    min-height 100%
+  > div
+    transform translate3d(0, 0, 0)
+    > div
+      min-height 0
+      max-height 100%
 
 .q-layout-header
   box-shadow $layout-header-shadow
@@ -67,7 +71,7 @@ $layout-transition = all .12s ease-in
 
 .q-layout-drawer-opener
   z-index ($z-marginals + 1)
-  height 100vh
+  height 100%
   width 15px
 
 .q-page-sticky-shrink