Search code examples
cordovajquery-mobilewindows-phone-8.1windows-phone-8-emulator

fixed footer with windowsphone 8.1, cordova and jquery mobile not working correctly

I want to use a fixed footer in my cordova project. I m currently testing my development on a windowsphone 8 device and emulator. I used two different sizes of the emulator and receive two problems (one for each) regarding the positioning.

html code:

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#projects">Projects</a></li>
        </ul>
    </div>
</div>

Here is what it looks like: Error in positioning

As you can see on the left one the footer is too low - on the right one too high. However, if i right click exactly once within the emulator it looks fine as seen in the following screenshot. If i click another time the positioning is false again ...

Desired Look - after exactly one rightclick

Anyone an idea why this happens and how to resolve it?

Solution

  • I had similar problems with Windows Phone 8. I didn't manage to fix the problem from the left screenshot in the app with visible status bar, so I set Fullscreen to true in config.xml

    <preference name="Fullscreen" value="true" />

    After that, I had still issues with bottom menu being placed too high, but only on emulator. Everything was looking fine on physical device.