No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    1
    2
    1488
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rconstantine last edited by 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>
      1 Reply Last reply Reply Quote 0
      • R
        rconstantine last edited by

        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>
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post