Body Under the Drawer



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

    Screen Shot 2020-11-30 at 12.14.01 PM.png Screen Shot 2020-11-30 at 12.13.27 PM.png



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



  • @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!


Log in to reply