How to make a page scrollable in @ionic/vue 0.5.0

Ionic Framework Ionic Vue
1

I have a page that is longer than viewport, I am battling to make it scroll. the footer (tabs) height is 70px.

I tried various combinations of padding-bottom and overflow-y for ion-page and .ion-page but none of them work. What is the best way to make the page scrollable?

Page structure

<template>
  <ion-page>
    <Header />

    <RecentList :data="recentList" />

    <SectionDivider data="Favourites" />

    <QuickActions />

    <Tabs />
  </ion-page>
</template>

I tried to move tabs out of ion-page tags

<template>
  <ion-page>
    <Header />

    <RecentList :data="recentList" />

    <SectionDivider data="Favourites" />

    <QuickActions />
  </ion-page>
  <Tabs />
</template>

Demo

Screenshot 2020-10-01 at 10.01.44
Screenshot 2020-10-01 at 10.01.44798×444 23.9 KB

2

what is "<Tabs/>" really need to see a bit more code here, the first thing I would suggest is using <ion-content> in you page

3

@aaronksaunders Tabs is the footer nav bar, RecentList is a ul li component, QuickActions is the pictured buttons component. Here is the repo https://github.com/dlodeprojuicer/ionic-vue-mobile-template-04

4

<ion-content> worked, however the issue is how I setup routes. I did not want to use tab children

  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/profile',
    component: () => import('@/views/Profile.vue')
  },

to have the <Tabs /> (footer) on each page I had add the tabs component on each page.

5

Everything should be inside the tabs container not the other way around… not really clear what the structure of your UI is so it’s hard for me to provide additional assistance