Question

I have a problem with my local CSS for jQuery Mobile. Some of the styles are being applied (colors, borders and some other styling), but others aren’t and I cannot figure out why. The listview is not styled properly and the ‘ui-loader’ is showing at the bottom of the page. So the following does not style completely correctly:

<link rel="stylesheet" type="text/css" href="./css/mobile-custom.min.css" />
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.min.js"></script>

But this does:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.min.js"></script>

In response to this issue: jquery mobile css does not load from local, only from web, I also tried other relative paths but this makes no difference. I can see in Chrome that the local jQuery js and css (and its 5 images such as the ajax-loader.gif under ./css/images/) have definitely been loaded. There are no errors in the Chrome element/page inspector either.

Any ideas why this is happening?

Answer 1

OK, this took me like, two days to figure out but here it is. If you are creating your own theme using the themeroller you MUST remember to download and add the “themeless structure” CSS file. This was not mentioned in any of the answers anywhere on SOF. By adding:

 <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.2.0.css" />

to:

 <link rel="stylesheet" type="text/css" href="css/jquery.mobile-custom.min.css" />
 <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.2.0.css" />
 <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>

It all finally works!