fix(QDrawer): Position when on iOS and QLayout is containerized

Author: rstoenescu

docs/src/pages/layout/drawer.md

@@ -27,6 +27,10 @@ Since QDrawer needs a layout and QLayout by default manages the entire window, t
 By default, QDrawer has touch actions attached to it. If this interferes with your drawer content components, disable it by specifying the Boolean `no-swipe-close` property.
 :::
 
+::: warning
+When QDrawer is set into overlay mode, **it will force it to go into fixed position**, regardless if QLayout's "view" prop is configured with  "l/r" or "L/R". Also, **if on iOS platform and QLayout is containerized**, the fixed position will also be forced upon QDrawer due to platform limitations that cannot be overcome.
+:::
+
 ### Basic
 
 <doc-example title="Basic" file="QDrawer/Basic" />

docs/src/pages/layout/layout.md

@@ -72,7 +72,8 @@ These settings are completely up to you to use as you'd like. You could even go
 <q-btn push color="red" icon-right="launch" label="Layout Builder" type="a" href="/layout-builder" target="_blank" rel="noopener noreferrer" />
 
 ::: warning
-It is important that you specify all sections of a QLayout, even if you don't use them. For example, even if you don't use footer or right side drawer, still specify them within your QLayout's `view` prop.
+* It is important that you specify all sections of a QLayout, even if you don't use them. For example, even if you don't use footer or right side drawer, still specify them within your QLayout's `view` prop.
+* When QDrawer is set into overlay mode, **it will force it to go into fixed position**, regardless if QLayout's "view" prop is configured with  "l/r" or "L/R". Also, **if on iOS platform and QLayout is containerized**, the fixed position will also be forced upon QDrawer due to platform limitations that cannot be overcome.
 :::
 
 ### Containerized QLayout

ui/src/components/layout/QDrawer.js

@@ -205,7 +205,8 @@ export default Vue.extend({
     fixed () {
       return this.overlay === true ||
         this.miniToOverlay === true ||
-        this.layout.view.indexOf(this.rightSide ? 'R' : 'L') > -1
+        this.layout.view.indexOf(this.rightSide ? 'R' : 'L') > -1 ||
+        (this.$q.platform.is.ios && this.layout.container === true)
     },
 
     onLayout () {

ui/src/components/layout/QLayout.styl

@@ -1,11 +1,6 @@
 .q-layout
   width 100%
 
-  &--containerized
-    // https://github.com/quasarframework/quasar/issues/4127
-    // Fixes scroll issues with containerized Layout inside Dialog on iOS
-    position unset !important
-
 .q-layout-container
   position relative
   width 100%
@@ -170,3 +165,10 @@ body.q-ios-padding
     padding 16px
   @media (min-width $breakpoint-lg-min)
     padding 24px
+
+body.platform-ios
+  .q-layout--containerized
+    // https://github.com/quasarframework/quasar/issues/4127
+    // Fixes scroll issues with containerized Layout inside Dialog on iOS;
+    // QDrawer needs to be forced into fixed position
+    position unset !important