Tip #1: Cordova Integration with jQuery Mobile in Windows Phone 8

November 5, 2014 in Apache Cordova, JavaScript, jQuery Mobile

One of the common issues when you use jQuery Mobile with Apache Cordova in Windows Phone 8 is the following:

  • Trimmed header title.
  • Footer is not aligned to bottom.

The following figure shows this problem in details:

Windows Phone 8 Bug

Windows Phone 8 Bug

In order to fix the “Trimmed header title” problem, you need to override ui-header and ui-title css classes as shown in the following code snippet:

.ui-header .ui-title {
    overflow: visible !important; 
}

In order to fix the “Footer is not aligned to bottom” problem, you need to hide the System Tray by editing MainPage.xaml file as shown in the following code snippet:

<phone:PhoneApplicationPage 
    ...
    shell:SystemTray.IsVisible="False">
    ...
</phone:PhoneApplicationPage>

After applying these two fixes, you will find your Cordova app properly displayed in your Windows Phone 8 device.

Reference:

“JavaScript Mobile Application Development” Book:

Comments are closed.

Skip to toolbar