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

dgk

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>

dgk

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

dgk

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

No More Posting New Topics!

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