qPageSticky to fix header/footer?

[danielsalles]

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.

[chbarr]

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

[rstoenescu]

@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

[danielsalles]

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