Notch on iphones is partially obstructing the app. Whats the best way of handling this?
I tried this but no luck
Notch on iphones is partially obstructing the app. Whats the best way of handling this?
I tried this but no luck
I’m not a Vue user, but if this happens i a starter app, maybe the safe area’s don’t work. Then you should open an Issue here
You cat try adding this to style section in app.vue
<style>
ion-navbar.toolbar.toolbar-ios.statusbar-padding,
ion-navbar.toolbar-ios ion-title.title-ios,
ion-toolbar.toolbar.toolbar-ios.statusbar-padding,
ion-toolbar.toolbar-ios ion-title.title-ios {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
</style>
@EinfachHans @aaronksaunders thanks. Adding ion-safe-area-top
class to header worked
<ion-header class="ion-safe-area-top">
I think this should be come out of the box (it does in angular)
You don’t show any source code for the page so I cannot answer that question. But I am guessing that you are not using ion-header?