q-page shows under q-header



  • MainLayout.vue

    <template>
    <q-layout view=“lHh lpR lFf”>
    <q-header reveal elevated class=“mobile-only”>
    </q-header>
    <q-header class=“mobile-hide”>
    </q-header>
    <q-drawer
    </q-drawer>
    <q-page-container>
    <router-view />
    </q-page-container>
    <q-footer elevated class=“mobile-only”>
    </q-footer>
    </q-layout>
    </template>

    Page.vue

    <template>
    <q-page padding>
    <p>This content is under the q-header on mobile. Why?</p>
    </q-page>
    </template>



  • You have a typo in <q-drawer> tag, miss closing “>”



  • Sorry, it was accidentally omitted the closing “>” on this post, but I do have it in the acutal page. So, assuming my closing tags are all properly set, my question remains… why does the content of q-page-container start UNDER the q-header on MOBILE-HIDE and works perfectly for q-header on MOBILE-HIDE?



  • You meant that you haven’t any drawer in mobile?



  • No, drawer works perfectly in mobile. What I’m saying is that this content: <p>This content is under the q-header on mobile. Why?</p> is not visible because it is covered by the <q-header> on mobile. To see the content, I added this: <div style=“height:50px;” class=“mobile-only” /> to move the <p> 50 pixels lower to show below the <q-header>. Shouldn’t ALL of the content in the Page.vue file be seen just below the header and NOT have the header covering it up? It works correctly in desktop – content actually begins below the <q-header>, but mobile it is hidden.


Log in to reply