q-drawer locked to q-page, i.e. not fixed



  • In my app the left drawer is not fixed like in the examples when content in the the page component is scrolled it scrolls with it.

    I’ve check my html against the example for my layout page and that is all fine. The props for the drawer are just as in the example.

    I see no special css in the codepen so I assume that a fixed drawer is the default

    This project has come forward from pre 1.0 but I assumed any core css or css in the layout component was updated.
    https://github.com/quasarframework/quasar/tree/dev/ui/src/css
    so I scrubbed node_modules and reinstalled. Still there.

    I built a clean new app. Tossed in some content. Works fine

    Just can’t put my finger on issue.

    Any suggestions?

    using
    Pkg quasar… v1.9.8
    Pkg @quasar/app… v1.6.0

    <template>
      <q-layout view="hHh lpR fFf">
        <!-- Header/Toolbar -->
        <q-header elevated v-if="this.isAuthenticated">
          <q-toolbar>
            <q-btn
              dense
              flat
              round
              icon="menu"
              @click="menuOpen = !menuOpen"
            />
            <q-toolbar-title>
              {{ appName ? `${appName} -` : '' }} {{ pageName() }}
              <!-- <div slot="subtitle">{{subTitle}}></div> -->
            </q-toolbar-title>
    
            <q-btn
              icon="stop"
              small
              color="secondary"
              round
              @click="logout('admin')"
              v-show="isAdmin"
            >
              <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
                Exit Administrator Configuration Mode
              </q-tooltip>
            </q-btn>
    
            <q-btn
              class=""
              icon="fas fa-key"
              small
              round
              @click="pinpad.admin=!pinpad.admin"
              v-show="isAuthenticated&&!isAdmin"
            >
              <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
                Enter Configuration Mode - Requires Administrator Pin
              </q-tooltip>
            </q-btn>
    
            <q-btn
              icon="home"
              small
              round
              color="secondary-1"
              text-color="secondary-1"
              to="/home"
            >
              <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 20]">
                Home - Dashboard
              </q-tooltip>
            </q-btn>
          </q-toolbar>
        </q-header>
        <!-- MENU     -->
        <q-drawer
          v-if="this.isAuthenticated"
          show-if-above
          v-model="menuOpen"
          side="left"
        >
          <q-drawer-menu
            :menu="menu"
            :heading="isAdmin ? 'Configuration':'Control'"
            @active="(item) => active=item"
            :access="isAdmin ? 2 : 1"
          />
        </q-drawer>
        <!-- main page -->
        <q-page-container>
          <router-view />
          <!-- <router-view :key="$route.name" /> -->
          <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
            <q-btn fab icon="keyboard_arrow_up" />
          </q-page-scroller>
        </q-page-container>
    
        <!-- modals -->
        <q-dialog v-model="pinpad.admin">
          <q-pin-pad
            @validate="authenticate($event,'admin')"
            message="Enter Pin for Adminstator Access"
            title="Administrator Access"
          />
        </q-dialog>
    
        <q-dialog v-model="pinpad.user" persistent>
          <q-pin-pad
            @validate="authenticate($event,'user')"
            message="Enter Pin for System Access"
            title="System Access"
          />
        </q-dialog>
    
        <!-- footer toolbar -->
        <q-footer elevated v-if="this.isAuthenticated">
          <q-toolbar>
            <div style="padding-right: 1em">
              Status:
            </div>
            <q-spinner-hourglass v-if="get('footer.spinner')" />
            <q-toolbar-title>
              {{ get('footer.message') || '' }}
            </q-toolbar-title>
            <q-btn
              glossy
              :class="cstatus('state')"
            >
              {{ cstatus('state') }}
              <q-tooltip
                anchor="bottom middle"
                self="top middle"
                :offset="[0, 20]"
              >
                System Controller Status
              </q-tooltip>
            </q-btn>
            <q-item class="etime">
              {{ `uptime: ${cget('uptime') || '' }` }}
            </q-item>
          </q-toolbar>
        </q-footer>
      </q-layout>
    </template>
    
    <script>
    
    import idleTimeout from 'idle-timeout'
    import { openURL } from 'quasar'
    
    // ----------- INTERNAL DEPENDENCIES ------------
    // assests
    import menu from 'assets/menu'
    // components
    import QDrawerMenu from 'src/components/DrawerMenu'
    import QPinPad from 'src/components/PinPad.vue'
    
    // MIXINS
    // general mixins
    import authenticate from 'src/mixins/authenticate' // maybe use an authentication api passed as a prop instead?
    // store mixins
    import state, { bindState } from 'src/mixins/state'
    // database mixins
    import docProp from 'src/mixins/doc-prop'
    import database from 'src/mixins/database'
    // controller websocket
    import controller from 'src/mixins/controller'
    // ----------- INTERNAL DEPENDENCIES ------------
    
    export default {
      data () {
        return {
          menuOpen: false,
          menu: menu,
          pinpad: { user: false, admin: false },
          active: {} // last/active sidebar item
        }
      },
      components: {
        QDrawerMenu,
        QPinPad
      },
      mixins: [database, controller, authenticate, state, docProp],
      props: [], // must pass service name as prop in either route call or calling template
      // warning: no computed values accessing the feathers-vuex store
      computed: {
        readonly () {
          return (!this.appDBLive || !this.appActive ||
          !this.isAdmin || !this.isAuthenticated)
        },
        appName: function () {
          return 'APP'
          // return this.getConfigDocProp('name') || 'UCI Application'
        }
      },
      watch: {
        readonly: function (val) {
          console.log('setting global readonly', val)
          this.set('db.readonly', val)
        },
        userState: async function (state) {
          //   this.$router.push({ path: '/home' })
          //   this.connectController()
          // } else {
          //   await this.removeControllerListeners()
          //   await this.$socket.disonnect()
          //   this.$q.notify({ color: 'negative', message: 'socket to controller has been closed' })
          //   console.log('unload the store here')
          // }
        }
      },
      methods: {
        openURL,
        pageName () {
          const rname = this.$route.name || this.$route.params.name
          if (this.active ? this.active.name : false) {
            const a = this.active
            if (this.menu.items.find(item => item.name === rname)) return a.label ? a.label : a.name[0].toUpperCase() + a.name.slice(1)
          }
          return rname[0].toUpperCase() + rname.slice(1)
        }
      },
      async beforeCreate () {
      },
      created () {
        // set site load defaults
        this.set('appNameSpace', '_application')
        bindState(this, this.get('appNameSpace'), 'app') // for cget and cset
        this.set('db.locked', false) // unlock after authentication
        this.set('db.ready', false) // connected and all loaded
        this.cset('state', 'unavailable') // controller application state
        this.cset('db.live', true) // if controller application is listening for database changes
        // to logout the user on idle
        const idle = idleTimeout(this.logout, { element: document, timeout: 1000 * 60, loop: true })
        idle.pause()
      },
      async beforeMount () {
      },
      async mounted () {
        await this.initDatabase() // will be pushed to database page if any issues
        await this.loadCollections()
        await this.connectController()
        console.log('authenticated?', this.isAuthenticated)
        if (!this.isAuthenticated) this.pinpad.user = true
        this.$router.push({ path: '/home' })
      },
      beforeDestroy () {
      }
    }
    
    </script>
    
    <style lang="stylus">
    
    .etime
      background transparent
    
    </style>
    

    936325b9-25ab-4f1c-b9da-40ca36022f7f-image.png



  • so moved the src/ folder over to clean starter build and the issue persists 😞 I’ve apparently overridden some css?

    if I comment out all my custom styling…still happens



  • Arrrh…Just had a simple issue with the layout view

    Had <q-layout view="hHh lpR fFf">

    needed <q-layout view="hHh Lpr fFf">

    lowercase l or r in middle three indicates locked to page container

    nevermind


Log in to reply