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

rconstantine

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>

rconstantine

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>