PhoneGap Build leaves an empty space at the bottom of the page when using position fixed

  • 4
  • Problem
  • Updated 7 years ago
  • Not a Problem
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 is 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/libra...

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 having to build the app in the SDK makes it pointless to build a Windows Phone app with phonegap build.

To make phonegap build usable again the phantom ApplcationBar will need to be removed from the final build.
Photo of Richard

Richard

  • 13 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 4
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
Hi Richard

Do you have a screenshot or simple app to reproduce?
Photo of Richard

Richard

  • 13 Posts
  • 0 Reply Likes
Hi Amir

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.
Note to not include the _Issues folder in the build. This folder also has issue screenshots and a WP app.xap file from PGB.

http://11past7.com/files/FixedFooterI...

Attached are several images of the issue and how it displays
- view in Chrome and Firefox



- Test app built in Build and viewed on iPhone 5 (displays correctly)


- Test app built in Build and viewed on Nokia 520 WP8 (notice black at the bottom)


- Images of my actuall app with the fixed footer problem



- Image of the WP native menu solution I had to create in WP8 SDK.


Here are a few examples of the issue on the net.

https://github.com/jquery/jquery-mobi...

http://forum.jquery.com/topic/windows...

http://stackoverflow.com/questions/16...

None have come up with a solution that actually works, and one that works in PG Build.
Photo of Richard

Richard

  • 13 Posts
  • 0 Reply Likes
I should add.

The yellow bar at the bottom of the test app is the fixed footer and should align to the bottom of the screen.

Note the app http://dealsnapa.com/ is already released for Android and iPhone. This issue has been holding me back from releasing in Windows Phone. You can download it from those stores if you want to see what the fixed footer should be doing.

Thanks
Photo of John Saya

John Saya

  • 68 Posts
  • 7 Reply Likes
Hi Richard,

I haven't worked with Windows Phone, but I know I had some strange issues with a fixed footer hovering a few pixels above the bottom on iOS periodically in the past.

After months of dealing with it, I finally noticed scrolling the body would realign everything back to normal.


setTimeout("$('html, body').animate({scrollTop:0}, '');", 200);


It's not a perfect solution, and don't know if it's the same thing you're experiencing on Windows Phone, but maybe it will help.

John
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
The following discussion probably could help with the said issue.
https://groups.google.com/forum/#!top...

Anyway, we are not really answering a framework or programming questions over here. This forum used by community to post question or problems related to Build service. Hence, the best place to ask should be at our PhoneGap community forum or perhaps subscribed to the PhoneGap paid support.

Community Forum: https://groups.google.com/forum/?from...
Paid Support: http://phonegap.com/support

Hope you'll find the answer soon.

Thanks
Photo of Kim Ras

Kim Ras

  • 45 Posts
  • 0 Reply Likes
Hi
I had a similar issue, this was suggested to me:

http://forum.jquery.com/topic/jquery-...

It is not working on the Windows Phone 7 that is used on Build, but might work on Native Windows Phone 8
Regards
Kim
Photo of Richard

Richard

  • 13 Posts
  • 0 Reply Likes
Hi Amir

Although I agree that the issue is related to the framework. It is also related to PG Build.

I have logged an issue in Apache
https://issues.apache.org/jira/browse...

Looking at the issue in terms of the framework, they may just say well build a native menu with the template and using the Windows Phone SDK

But if you are using Build to compile your app, there is no way to create this native menu that you can then upload into build to compile (as far as I know)

So this is very much a PGBuild issue.

PG Build needs to remove the ApplicationBar space during the compile.

At present anyone using a fixed bottom nav cant use PG Build.
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
Hi Richard

I'll bring this up on upcoming meeting to discuss what we can do from our side, to overcome this issue.

Thank you for your valuable feedback!

Cheers
Photo of Daniel Lurcock

Daniel Lurcock

  • 1 Post
  • 0 Reply Likes
Thanks for the info, this was bugging me, so now I know to avoid PGBuild for this.
Cheers
Photo of Kim Ras

Kim Ras

  • 45 Posts
  • 0 Reply Likes
I actually ended up removing the footer properties in code with a Conditions so I still can share the code with android and iPhone.

-- Not ideal but then I did not have to move away from Build..
Photo of Amir

Amir

  • 8261 Posts
  • 263 Reply Likes
Topic closed due to inactive. Please create a new one if needed.

Thanks

This conversation is no longer open for comments or replies.