Ion-footer-bar and bar-footer stay at the top

1

hi , i wanted to implement a footer for button for my page . However, the footer keeps remain at the top or even overlaps with my ion-content. please help

<ion-header-bar >
</ion-header-bar>
<ion-content>

</ion-content>

<ion-footer-bar>
        <button class="button button-clear button-balanced" ng-click="acceptTc()">Accept</button>
</ion-footer-bar>
2

a little bit more of your source code would be nice

3

can you paste your code on codepen.io

4

The same here.

I use:
“@ionic/core”: “5.0.0-dev.202001091948.d73aaa9”,
“@ionic/vue”: “0.0.9”,

With this in Vue component:

<template>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-vue-router name="header"></ion-vue-router>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-vue-router></ion-vue-router>
    </ion-content>

    <ion-footer>
      <ion-tab-bar>
        <ion-tab-button v-for="item in content.pages" :key="item.id" @click="$router.push('/page/' + item.id)">
          <ion-label>{{ item.short_title }}</ion-label>
          <ion-icon name="alarm"></ion-icon>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-footer>

  </ion-app>
</template>
5

Another maybe related issue:
put around will cause it invisible (I can not see what causes this invisibility). Content will became visible when I move it from in devtools or in code.

Snímek obrazovky 2020-01-14 v 10.10.13
Snímek obrazovky 2020-01-14 v 10.10.131152×457 75.9 KB

6

Solved by adding Ionic CSS inclusion in main.js:

import "@ionic/core/css/core.css";
import "@ionic/core/css/ionic.bundle.css";

Inspired by: https://github.com/aaronksaunders/vue-course-my-app/blob/cd0c53616e6b4e7c5fcd7cb48def45273a77b423/src/main.js