qPageSticky to fix header/footer?



  • I’m trying to keep the header/footer always on my screen. And after some research on the documentation, I saw that q-page-sticky could solve my problem. But I guess it was not what I expected.

    I wish the header/footer simply stays on the screen all the time, and the scroll only happens on the q-page-container. Do you understand?

    <template>
    <q-page-sticky expand position="bottom">
      <q-layout-footer>
        <q-tabs class="shadow-2" align="justify">
          <q-route-tab to="/" exact slot="title" icon="search" label="Buscar" />
          <q-route-tab to="/" exact slot="title" icon="all inclusive" label="Descobrir" />
          <q-route-tab to="/" exact slot="title" icon="shopping basket" label="Pedidos" />
          <q-route-tab to="/main/account" exact slot="title" icon="person" label="Conta" />
        </q-tabs>
        </q-layout-footer>
    </q-page-sticky>
    </template>
    

    After using this code, my footer has created a strange margin.
    alt text



  • @danielsalles
    i think you must use q-layout-footer and q-layout-header and the view prop of q-layout like hHh lPr fFf

    Like that:

    <div id="q-app">
      <q-layout view="hHh lPr fFf">
        // position of header is fixed because of H in prop view
        <q-layout-header>Your header content</q-layout-header>
        <q-page-container>
          // the pages are injected here depending of your router config
          <router-view></router-view>
        </q-page-container>
        // position of footer is fixed because of F in prop view
        <q-layout-footer>
          <q-tabs>
            <q-route-tab slot="title" icon="person" label="A" to="/a"></q-route-tab>
            <q-route-tab slot="title" icon="person" label="B" to="/b"></q-route-tab>
            <q-route-tab slot="title" icon="person" label="C" to="/c"></q-route-tab>
          </q-tabs>
        </q-layout-footer>
      </q-layout>
    </div>
    

  • Admin

    @danielsalles Hi, you’re missing out on a lot that QLayout can do for you. Check out the demo and play with the “view” prop 😉



  • @rstoenescu said in qPageSticky to fix header/footer?:

    @danielsalles Hi, you’re missing out on a lot that QLayout can do for you. Check out the demo and play with the “view” prop 😉

    A simple reveal true solved my problem.

    Thank you!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.