CODEWITHSUNDEEP
javascripthtmlcssvue.jsquasar-framework
Joe B.
Joe B.

Reputation: 820

Why is Quasar drawer overlaying Quasar toolbar in Vue app?

I'm using the quasar UI framework. I have a main layout file that only has a toolbar. This toolbar displays for all pages of my application.

<template>
  <q-layout view="hHh Lpr lff" style="background-color: #F8F8FA">
    <q-header elevated class="bg-black text-grey-8" height-hint="64">
      <q-toolbar style="height: 64px">
        <q-toolbar-title
          style="cursor: pointer;"
          @click.stop="toHome()"
          shrink
          class="row items-center no-wrap"
        >
          <q-avatar>
            <img src="~assets/logo_white.png" alt="logo" />
          </q-avatar>
          <span class="text-white gilroy q-ml-sm">My App</span>
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

I want to put a nav drawer on only one of my pages that overlays underneath the toolbar from my main layout. I'm having trouble figuring out how to ensure the overlay doesn't go on top of the tool bar. Here is that page and my attempt at getting the drawer to overlay underneath the toolbar:

<-- TestPage.vue -->
<template>
  <q-layout>
    <q-drawer
      v-show="$route.params.slugNumber"
      content-style="background-color: #F8F8FA"
      v-model="leftDrawer"
      :mini="!leftDrawer || miniStateLeft"
      side="left"
      bordered
      overlay
    >
    </q-drawer>
    <q-page-container>
      <q-page>

      </q-page>
    </q-page-container>
  </q-layout>
</template>

Here is my router file for reference:

const routes = [
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [
      { path: "", component: () => import("pages/HomePage.vue") },
      {
        path: "/testpage",
        component: () => import("pages/TestPage.vue")
      },
    ]
  },
];
export default routes;

Would love to understand what I'm missing here. Many thanks in advance.

Upvotes: 2

Views: 3239

Answers (2)

Angrez
Angrez

Reputation: 11

For me setting breakpoint to minimum value works. Try that :breakpoint="500"

Upvotes: 1

Dan
Dan

Reputation: 63089

Try applying class z-top to the header:

<q-header elevated class="bg-black text-grey-8 z-top" height-hint="64">

From the Quasar Visibility docs:

[z-top] Positions your element on top of any other component, but behind Popovers, Tooltips, Notifications.

Upvotes: 3

Related Questions