My ion-header is cropped-off on my iPhone simulation:
On an iPad Pro Simulation, it works, but I feel a little bit is cropped-off:
The Web View just works fine:
My Pages Code is the boiler-plate code of the wiki:
<style scoped>
.example-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Listen now</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Listen now content</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';
export default {
components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
};
</script>
I use vite + vue and vue-router for routine:
<template>
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom" class="ion-padding-bottom">
<ion-tab-button tab="home" href="/home">
<ion-icon :icon="home" />
<ion-label>Listen now</ion-label>
</ion-tab-button>
<ion-tab-button tab="kalender" href="/kalender">
<ion-icon :icon="calendar" />
<ion-label>Kalender</ion-label>
</ion-tab-button>
<ion-tab-button tab="ernährung" href="/ernaehrung">
<ion-icon :icon="analytics" />
<ion-label>Ernährung</ion-label>
</ion-tab-button>
<ion-tab-button tab="profil" href="/profil">
<ion-icon :icon="personCircle" />
<ion-label>Profil</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
<script lang="ts">
import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/vue';
import { home, analytics, personCircle, calendar } from 'ionicons/icons';
export default {
components: { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon },
data() {
return {
home,
analytics,
personCircle,
calendar
};
},
};
</script>
Do you have any suggestions why the header behaves so strange?
I would be eternally grateful for help.
Warm regards
Patrick