How to fixed footer in mobile?

[teo]

Hello, my problem is when I scrolling down, the footer will show the whitespace of the screen. I’m trying to create a mobile apps that have a fixed footer at the bottom of the screen. Am I using the wrong q-layout settings? Below is my code, please help and guide me to create a fixed footer.

This is my q-layout

  <q-layout view="hHh Lpr fFf">
    <router-view name="header" />
    <router-view name="drawer" />
    <router-view name="footer" />
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>

Footer

  <q-footer elevated reveal>
    <q-toolbar>
      <q-btn flat icon="home" class="q-mr-sm" />
      <q-space />
      <q-btn
        flat
        color="text-black"
        icon="description"
      />
      <q-space />
      <q-btn flat icon="person_pin" class="q-mr-sm" />
    </q-toolbar>
  </q-footer>

[jrhopkins83]

I have the exact sam issue. It looks fine in Chrome browser and in the iOS xCode simulator but not on an actual device.
<q-footer class=“fixed-bottom”>
<q-tabs
v-model=“tab”
shrink
stretch
align=“justify”
class=“bg-primary text-white”
:breakpoint=“0”
>
<q-tab
name=“back”
icon=“arrow_back”
@click="$router.go(-1)"
/>
<q-tab
name=“home”
icon=“home”
@click="$router.push(’/’)"
/>
</q-tabs>
</q-footer>

[jrhopkins83]

I think the issue is with Cordova. After searching, there were multiple issues on stack overflow and other sites and I found this article on Medium: https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493.

I’m using Icon-genie to build my icons and splash screens so I was afraid modifying the splash screen and config.xml wouldn’t work.

Coincidentally I started looking at Capacitor since Ionic seems to be a more popular mobile development framework. I searched for the same screen issue with Ionic and only found one from a couple of years ago.

So I rebuilt the app with Capacitor and the screen displays correctly. This is a new app (actually my first) and I haven’t yet used any additional Cordova plugins, so I have the luxury of being able to convert it. I’ve read that most Cordova plugins are supported by Ionic but there are some that aren’t. If you have the flexibility and want to try that out just follow similar instructions for Capacitor.
https://quasar.dev/quasar-cli/developing-capacitor-apps/preparation