locked
Nokia Lumia screen height problem with HTML5/js app RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I have a Windows Phone 8 app which tested out fine on the emulator.  However, running on a Nokia Lumia, the bottom of the web browser window is cut off.  I thought it could be something with my HTML so in order to figure out what was happening, I did the following.

    1) started over with a blank C# HTML5 app from the template in VS 2013.

    2) utilized a very simple page to align a div to the bottom of the screen.

    The same behavior was seen.  In the emulator with VS you can see the full div at 100px in height.  On the Lumia, you can see just the very top edge of the div.  This leads me to believe the problem is not with my HTML, but is either a problem with the default HTML5/js app template or possibly a problem with the Lumia.  This happened on every Lumia I tried it with, and I tried several different devices.

    Here is my test with the emulator.

    

    And here it is on the Lumia 520.

    Steps to reproduce.

    1) create a blank C# html5 app.

    2) replace the code in index.html with the following:

    <!DOCTYPE>
<html>
<body>
<div style="; width:100%; height:100pt; background-color:yellow; padding:5px; bottom:0; ">
	test content :D
</div>
</body>
</html>

    3) test in the emulator

    4) test on a Lumia.  If you don't have a device, test through Nokia's remote device access.

    Any ideas or guidance would be greatly appreciated.

    Best regards,

    Jack

    Friday, January 10, 2014 11:49 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    I looked at your original post again and it seems that your style element for the <div> had the position attribute removed. When I added the style to the <div> I was able to reproduce the behavior you are experiencing.

    I have reported the problem to the appropriate folks. Even with your above workaround, although the <div> gets pushed upwards, it still does not display the entire height of the <div>, it only displays the partial height of the <div>. If you drag the page upwards, you should notice the complete <div>.

    It seems that at runtime, the WebBrowser control and the app bar overlap each other - which is why the <div> gets hidden behind the app bar. If you offset your bottom position to 100pt, you should atleast get the complete <div> visible without getting rid of the SystemTray.

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Wednesday, January 15, 2014 1:06 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    In my OP, the style that should put the div at the bottom is: bottom:0;

    I have to hide both the system tray and app bar to get it to display correctly for my app.  If either one of these are visible, it is offset downward and the content at the bottom of the screen is cut off.  Thank you for reporting and examining this.

    Wednesday, January 15, 2014 12:16 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    I ran the above code on the Windows Phone Emulator - GDR 3 build and the above HTML is actually rendered the top of the page rather than at the bottom. With the Nokia Emulators, which specific Emulator are you using? With the actual Nokia device which update does the device have? GDR3?

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Tuesday, January 14, 2014 12:48 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    My understanding is that through the website linked to above it is remote controlling the actual device. So it is not an emulator.  They are running GDR2.  The screenshot above from the emulator on my PC is from GDR1. 

    I was finally able to get it to work.  I had to hide the system tray and action bar to make the app run in full screen mode.  It appears to me that this is a bug in the web browser control where it is reporting the full screen height including the system tray and the amount of space the action bar would take up if it was expanded. I just tried my actual app on real device with GDR3 and it is working correctly with the fix below.

    Until this is fixed, others might benefit from knowing how to make this work:

    shell:SystemTray.IsVisible="False">


    You can't use an action bar, so just remove any action bar code or set it to invisible.

    I do believe this is a bug, so if this could be forwarded to the Visual Studio development team, I would appreciate it.

    Best regards,

    Jack

    Tuesday, January 14, 2014 1:27 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I can certainly file a bug, but can you please re-iterate the exact repro steps and what emulator build did you reproduce the issue with? With the repro code that you provided above, I ran it on the Windows Phone Emulator - Update 3 and I actually see the yellow colored <div> on the top of the screen rather than the bottom, so the repro is not the same as what you are noticing in your app.

    Here is what I see when I run the code you pasted above - notice the yellow div is at the top of the screen, not the bottom that you have reported, so please post the exact repro steps:

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Tuesday, January 14, 2014 1:42 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I used the GDR1 emulator for the first screenshot with the div near the bottom of the screen.  Even that one is not where it should be.  It should be completely on the bottom.  If the GDR3 is showing the div at the top maybe that is a bug too.

    Login to Nokia Remote Device access.  Upload the XAP that you built from the above example and run the app.  Use the Nokia Lumia 900 or any others with GDR2 to reproduce.

    Tuesday, January 14, 2014 3:43 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I looked at your original post again and it seems that your style element for the <div> had the position attribute removed. When I added the style to the <div> I was able to reproduce the behavior you are experiencing.

    I have reported the problem to the appropriate folks. Even with your above workaround, although the <div> gets pushed upwards, it still does not display the entire height of the <div>, it only displays the partial height of the <div>. If you drag the page upwards, you should notice the complete <div>.

    It seems that at runtime, the WebBrowser control and the app bar overlap each other - which is why the <div> gets hidden behind the app bar. If you offset your bottom position to 100pt, you should atleast get the complete <div> visible without getting rid of the SystemTray.

    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Wednesday, January 15, 2014 1:06 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    In my OP, the style that should put the div at the bottom is: bottom:0;

    I have to hide both the system tray and app bar to get it to display correctly for my app.  If either one of these are visible, it is offset downward and the content at the bottom of the screen is cut off.  Thank you for reporting and examining this.

    Wednesday, January 15, 2014 12:16 PM