[CB-4028] PhoneGap leaves an empty space at the bottom of the page when using position fixed in WP7 WP8

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Won't Fix
• Affects Version/s: 2.8.0
• Component/s: cordova-wp7 (DEFUNCT)
• Assignee: Jesse MacFadyen
• Reporter: Richard Marshall
• Created: 27/Jun/13 12:37
• Updated: 23/Aug/18 07:18
• Resolved: 25/Apr/14 21:50

Description

I originally logged a ticket on the PhoneGap Build Support

http://community.phonegap.com/nitobi/topics/phonegap_build_leaves_an_empty_space_at_the_bottom_of_the_page_when_using_position_fixed?utm_content=topic_link&utm_medium=email&utm_source=reply_notification

It may be best to look at this topic as it has screen shots etc.

Below is an excerpt

==

I have built an app using HTML, CSS, JavaScript, jQuery, jQueryMobile. I am using PhoneGap build to compile the build. I am using Dreamweaver to develop. The app has a fixed menu at the bottom of the screen using position:fixed. This works well in both iOS and Android. When testing in Windows Phone 8 (Nokia Lumia 520) the app has a space under the menu.

From the research I have done so far there is allot of bad advice on the web. From what I can see; there is nothing wrong with the HTML, or CSS. The problem comes from the fact that the Windows Phone is expecting there to be an Applicaiton Bar at the bottom of the app. So the fixed menu sits on top of this missing menu.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff431813%28v=vs.105%29.aspx

One workaround is to make the viewport the exact height of the viewport. But this will only work on a per device scenario, so it cant be used to release an app.

I have had to resort to finishing the app using the windows phone SDK with WP7 phonegap template. I have removed the regular fixed position footer menu and replaced it with a WP7 native menu. This is now working well.

However. It would have been nice to be able to use the same bottom nav that exists in iOS and Android.

Can we have a way of disabling the space that is reserved for the windows ApplicationBar, so we can use our own fixed nav rather than a native windows one?

==

I built a test app to build in PhoneGap Build to test the problem.
It is created from the phonegap master template.
You can download it here.
http://11past7.com/files/FixedFooterIssue.zip
Note to not include the _Issues folder in the build. This folder also has issue screenshots and a WP app.xap file from PGB.