left-drawer pushes the existing screen to the right instead of moving on top

  • I have a map and had a working quasar v0.13 leftside drawer which would work fine. Now I changed to quasar v0.14.2 using this code from the docs:

    <q-scroll-area slot="left" style="width: 100%; height: 100%">
      <q-list-header>Left Panel</q-list-header>
      <q-side-link item to="/showcase/layout/play-with-layout">
        <q-item-side icon="account circle" />
        <q-item-main label="Play with Layout" sublabel="Learn more about it" />
        <q-item-side right icon="thumb_up" />
      <q-side-link item to="/showcase/layout/drawer-panels">
        <q-item-side icon="view_array" />
        <q-item-main label="Drawer Panels" sublabel="Layout left/right sides" />
      <q-side-link item to="/showcase/layout/fixed-positioning">
        <q-item-side icon="pin_drop" />
        <q-item-main label="Fixed Positioning" sublabel="...on a Layout" />
      <q-side-link item to="/showcase/layout/floating-action-button">
        <q-item-side icon="play_for_work" />
        <q-item-main label="Floating Action Button" sublabel="For Page actions" />
      <div v-if="layoutStore.leftScroll" style="padding: 25px 16px 16px;">
        <p class="caption" v-for="n in 50">
          <em>Left Panel has intended scroll</em>

    and the drawer moves my existing screen estate instead of moving on top. Any idea what’s wrong?

  • Just now I noticed that drawer moves on top in mobile mode and not when in desktop mode. I also found out that this is actually the case for the documentation example, so apparently this “desired behavior”. In my case it is not though, so is this something you can toggle off somehow, in the way that it always moves on top?

  • Ah… it is in the documentation (gloops):

    Used this and everything is working brilliantly:
    <q-layout ref=“layout” :left-breakpoint=0>

Log in to reply