-1

Since no one is answering and I've been downvoted I'll try to add some information.

I have an application I am developing for Android using jQuery Mobile and Phonegap.

Just now I tried using a custom Themeroller theme in my app. It works perfectly in my browser, but once I compiled it out to Android and load it on my phone, all CSS goes out the window. Everything is just stripped down blank elements. Javascript and HTML is still present and working as expected.

This is what my css and javascript links look like:

<link rel="stylesheet" href="themes/Custom.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

I have tried changing the order of the CSS files and had no change. I am using Phonegap 3.3 and this particular android is 2.3 (have not had time to test on other versions yet).

Any ideas on what is going on, how I can debug, or how to fix it?

By the way, I have uninstalled and then reinstalled the app.

sharf
  • 2,123
  • 4
  • 24
  • 47

1 Answers1

0

Since no one wanted to help, I did some experimenting and have found a "fix". First of all, the problem was in all versions of Android and iOS, as well as phonegap.

When including a custom Themeroller theme all CSS would be stripped from the app. I have no idea the cause of this. However, by copy-pasting the css from the custom theme file and putting it into my existing CSS file it worked. There must be some incompatability between Phonegap 3.3.0-3.4.0 and Themeroller themes for JQM 1.4.2.

sharf
  • 2,123
  • 4
  • 24
  • 47