[solved] sticking something to the bottom of a drawer with a tree in it doesn't work - ideas?



  • Hey guys, I’m hoping someone has done this before and can tell me what I’m doing wrong. I have a tree as the main item in my left drawer. I’m using it as a menu. Works great!

    What I’m trying to do is place one item (maybe more later) permanently at the bottom of the drawer. I’ve tried a number of things. The current try is using a footer. I’ve also tried q-page-sticky and just using positioning styles on a div. They all appear OK to start, but once I expand the tree to be larger than the window, the bottom items scroll with the tree, overlapping one or two items.

    Any ideas? Here is my code.

    <template>
      <q-layout view="hHh Lpr lFf">
        <q-layout-header reveal>
          <q-toolbar
            color="brand"
          >
            <q-btn
              flat
              dense
              round
              color="icon-button"
              @click="leftDrawerOpen = !leftDrawerOpen"
              aria-label="Menu"
              class="q-mr-sm"
            >
              <q-icon name="fas fa-bars" ></q-icon>
            </q-btn>
    
            <img id="logoImage" alt="logo" src="statics/GD_logo_new_gold.png" class="float-right">
    
          </q-toolbar>
        </q-layout-header>
    
        <q-layout-drawer
          v-model="leftDrawerOpen"
          :content-style="{background: '#003450'}"
        >
          <q-tree
            :nodes="booksMenu"
            node-key="nid"
            accordion
            color="icon-button"
            text-color="white"
            class="q-ml-sm q-mt-sm"
            :selected.sync="selected"
          ></q-tree>
    
          <q-layout-footer  class="q-ml-sm q-mb-sm">
            <q-btn
              flat
              dense
              round
              color="icon-button"
              @click="getMenu()"
              aria-label="Refresh Menu"
              class="q-mr-sm"
            >
              <q-icon name="fas fa-sync" class="float-left"></q-icon>
            </q-btn>
            <span class="text-white">Refresh Menu</span>
          </q-layout-footer >
        </q-layout-drawer>
    
        <q-page-container>
          <router-view ></router-view>
        </q-page-container>
    
        <q-layout-footer reveal>
          <q-toolbar
            color="brand"
            class="full-width"
          >
            <q-btn
              flat
              dense
              round
              color="icon-button"
              @click="clickPrev"
              aria-label="Back"
              class="col"
            >
              <q-icon name="fas fa-arrow-alt-circle-left" ></q-icon>
            </q-btn>
    
            <q-btn
              v-back-to-top.animate="{offset: 500, duration: 500}"
              flat
              dense
              round
              color="icon-button"
              aria-label="Back"
              class="col"
            >
              <q-icon name="fas fa-arrow-alt-circle-up" ></q-icon>
            </q-btn>
    
            <q-btn
              flat
              dense
              round
              color="icon-button"
              @click="clickNext"
              aria-label="Back"
              class="col"
            >
              <q-icon name="fas fa-arrow-alt-circle-right" ></q-icon>
            </q-btn>
          </q-toolbar>
        </q-layout-footer>
      </q-layout>
    </template>


  • Never mind. I happened upon another thread which mentioned a component I had missed before. QScrollArea is what I needed, and then to set the drawer as not scrollable itself. The above was adjusted to include this:

    <q-scroll-area
            class="scroll-height"
            :thumb-style="{
            right: '4px',
            borderRadius: '5px',
            background: 'red',
            width: '10px',
            opacity: 1}"
          >
            <q-tree
              :nodes="booksMenu"
              node-key="nid"
              accordion
              color="icon-button"
              text-color="white"
              class="q-ml-sm q-mt-sm"
              :selected.sync="selected"
            ></q-tree>
          </q-scroll-area>