[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>