I have a calendar page, but the calendar is mounted on the status bar
i’m using f7v5
What is it, Android, iOS? Cordova app or web app or PWA? React, Vue or Core? How did you open it, etc? 
Looking at the screenshot filename, it seems to be a native app on the iPhone xr simulator. Looks like it’s missing the safe area for the top notch.
hello, it’s cordova, in iOS, I’m using framework cli, the application I use framewok7 v5 core, the rest of screens appear correctly to me, but the screen of the calendar, it doesn’t make well the status bar, I believe that the configuration is well, because as I say, the other screens of the application if it makes them well.
Thanks
Can you post your html for the calendar page?
<template>
<div class="page" data-name="recuperar">
<div class="page-content">
<div id="calendar-recuperar" class="block block-strong no-padding no-margin no-hairline-top"></div>
<div id="calendar-events-recuperar" class="list media-list no-margin no-hairlines no-ios-left-edge">
<ul id='ul_eventos_recuperar' style='margin-bottom: 30px;'></ul>
</div>
</div>
</div>
</template>
I don’t see a navbar element, which I think handles the top safe area padding. Could you try adding this inside
right before page-content?
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left"></div>
<div class="title">Calendar</div>
<div class="right"></div>
</div>
</div>If I put that code in, my screen looks like this:
I try to get the same look I had with framework7 v4:
in the second image i’m not wearing the navbar
You need to tweak that custom toolbar height to also cover the statusbar area, or, put what you have in toolbar to navbar instead
1 Like