No header and footer because of Iframe and BackButton Event not working

[AppetitDev]

Lately when building my app I experienced 2 problems:

1. I have an Iframe on some of my pages, which should cover the whole screen but the header and footer should stay active. The problem is that the Iframe covers the whole page and the header and footer disappeared. I set the dimensions to auto and put width and height in the Iframe element to 100%. I tried fixed and inline positions and other topics here but nothing helped.

2. On that page I mentioned in 1. if you press the BackButton on an Android device you exit the app. I want it to go to the StartPage. Even if I set an event on 'BackButton' navigate to page 'StartScreen' it closes the app when pressing the back button.

   Because I tried every possible solution I shared my app with the support. I hope you can look into my issue. Thanks!

[Serhii Kulibaba]

Hello,

1. You can disable header and footer for the page: http://prntscr.com/9q1v3s
2. Please add code below on the backbutton event of the startscreen: event.stopPropagation();

[AppetitDev]

Thank you for your reply!
For 1. I have both activated, and they are shown in the builder, however the header and footer aren't shown in the app. Not even in the Online Cloud platform test.

Unfortunately your second suggestion isn't helping too. The app is still closing immediately after pressing the back button.

[Evgene Karachevtsev]

Hello,

1 Please try to set iframe position absolute, make its width 100% and height 80% depending on footer's height, because both footer and headers remain active and iframe is stretched across the page.
2 Please check these posts:
http://stackoverflow.com/questions/20...
http://stackoverflow.com/questions/31...

[AppetitDev]

Thank you for your reply.
I tried your first suggestion, however even if I put the Iframes size to width 10% and height 10% the header and footer are still not displayed. I also made the Iframes position absolute which didn't help too.
For your links in part 2, how does that Java code help me in Appery.io?

[John de Quarius]

Evgene,

I have this same issue when displaying a lot of list items. the header is set to fixed and the whole header disappears. The solution I've implemented was to override the css of the header in the page show but it's not pretty. This is rather a jquery mobile issue I think.

[AppetitDev]

Can you give us your CSS?

[John de Quarius]

code
jQuery("[name='mobileheader']").css("position","fixed");
jQuery("[data-role=footer]").css("position","fixed");
jQuery(".ui-header-hidden").css("position","fixed");
/code
this is what i use on every events which triggers the header/footer from disappearing. it still animates backdown however which I haven't really look into on completely overiding that event or stopping the header animate event. if you find a solution please share it back here.

[John de Quarius]

Oh nvm I've justed added this on page load and it works
code
Appery('mobileheader').unbind('slideUp').unbind('slideDown');
Appery('mobilefooter').unbind('slideUp').unbind('slideDown');
/code

[AppetitDev]

None of those are working for me :/