Body Under the Drawer

[cynderkromi]

I’m brand new to Quasar and following an online tutorial. On my page, the text that is in the body of the page is hiding under the drawer. I’ve been looking online but I’m not sure how to fix this.

This is my MainLayout.vue which I think is where the problem lies. Thanks in advance for the help!

<template>
  <q-layout view="lHh Lpr lFf">

    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
      </q-toolbar>

      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">To Do</div>
        <div class="text-subtitle1">{{todaysDate}}</div>
      </div>

      <q-img
        src="../statics/mountains.jpg"
          class="header-image absolute-top" />
    </q-header>

      <q-drawer
        v-model="drawer"
        show-if-above
        :width="250"
        :breakpoint="400"
      >
        <q-scroll-area style="height: calc(100% - 150px); margin-top: 192px; border-right: 1px solid #ddd">
          <q-list padding>

            <q-item 
                to="/"
                exact
                clickable 
                v-ripple>
              <q-item-section avatar>
                <q-icon name="list" />
              </q-item-section>

              <q-item-section>
                To Do
              </q-item-section>
            </q-item>

            <q-item 
              to="/help"
              exact 
              clickable 
              v-ripple>
              <q-item-section avatar>
                <q-icon name="help" />
              </q-item-section>

              <q-item-section>
                Help
              </q-item-section>
            </q-item>

          </q-list>
        </q-scroll-area>

        <q-img class="absolute-top" src="../statics/mountains.jpg" style="height: 192px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src="https://s.gravatar.com/avatar/272165c8f34526d962baaee0707bec5d?s=80">
            </q-avatar>
            <div class="text-weight-bold">Cynthia Heyman</div>
            <div>@cynthiablue</div>
          </div>
        </q-img>
      </q-drawer>

        <keep-alive>
          <router-view />
        </keep-alive>
        
    <q-page-container>
      
    </q-page-container>
  </q-layout>
</template>

<script>
import { date } from 'quasar'
import EssentialLink from 'components/EssentialLink.vue'

const linksData = [
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev'
  }
];

export default {
  name: 'MainLayout',
  components: { EssentialLink },
  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData
    }
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now()
      return date.formatDate(timeStamp, 'dddd, D MMMM YYYY')
    }
  }

}
</script>

<style lang="scss">
.header-image {
  height:100%;
  z-index: 1;
  opacity: 0.2;
  filter: grayscale(100);
}
</style>

[beets]

@cynderkromi your router-view should be inside the q-page-container. Also make sure the page component is wrapped in a q-page

[cynderkromi]

@beets said in Body Under the Drawer:

@cynderkromi your router-view should be inside the q-page-container. Also make sure the page component is wrapped in a q-page

Thanks! Moving the router-view worked!