Push pop-up with md

I’m trying to enable push pop-up with no luck
I have added the class save area to the popup view and main view.
Popup have push set to true.

I use md theme as well, and push popups should work. But you have to add a css rule to test it on desktop:

:root {
–f7-safe-area-top: 44px;

1 Like

I already tried that and its not working
testing on Android too. Same thing.
Is adding safe area to the popup view enough?

Yes that is enough. Are you using the latest version of Framework7? Can you show where you define push:true? This can be in the route, or on the popup element with data-push=“true” attribute.

im using wappler (cant control framework7 version) they say its ver 5.7.11
i have this in my app init

closeOnEscape: false,
closeByBackdropClick: false,
backdrop: true,
push: true

and this on the popup
<div id="RatingUserPagePopup" class="popup popup-push safe-areas" data-swipe-to-close="to-bottom" data-push="true">

How is that popup opened? Is it defined in your index.html or in a component file (used with route)?

in js like this app.popup.open('#RatingUserPagePopup', true);

Safe area is detected automatically, you can add CSS fix for testing purpose provided by @Tim. If you don’t see push popup without that hack, then your Android device/system doesn’t support safe areas

could this be an issue caused by cordova?

Popup opening suggestion.

after i change my main css to load at the bottom of the body its working on desktop

but on android if i did not set the safe-area-top manually, it will not work.
i have installed the cordova status-bar plugin and in framework init i set this:

statusbar: {
    iosOverlaysWebView: true,
    enabled: true,
    androidOverlaysWebView: true

why on android there is no safe area top by default? is there any plugin i need to install?
my app are only on portrait mode.

Because more likely the Android device you check just doesn’t support CSS safe areas on system level

its Samsung fold
it have a notch
another thing if i did use androidOverlaysWebView: false then any safe area top i add in css will be added after the status bar. so there will be a gap between the status bar and the navbar