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

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:


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


“JavaScript Mobile Application Development” Book:

This entry was posted in Apache Cordova, JavaScript, jQuery Mobile and tagged , , , by Hazem Saleh. Bookmark the permalink.

About Hazem Saleh

Hazem Saleh has more than eleven years of experience in Cloud, Mobile and Open Source technologies. He worked as a software engineer, technical leader, application architect, and technical consultant for many clients around the world. He is an Apache PMC (Project Management Committee) member and a person who spent many years of his life writing open source software. Beside being the author of the "JavaScript Unit Testing" book, "JavaScript Mobile Application Development" book, "Pro JSF and HTML5" book and the co-author of the "Definitive guide to Apache MyFaces" book, Hazem is also an author of many technical articles, a developerWorks contributing author and a technical speaker in both local and international conferences such as ApacheCon North America, Geecon, JavaLand, JSFDays, CON-FESS Vienna and JavaOne. Hazem is an XIBMer, he worked in IBM for ten years. Now, He is working for Nickelodeon New York as a Mobile Architect. He is also an OpenGroup Master Certified Specialist.