CODEWITHSUNDEEP
jquerycssjquery-mobilecss-specificity
Halfacre
Halfacre

Reputation: 585

JQuery Mobile 1.4.5 - ui-mini overridden by theme css

I'm updating a site from JQM 1.2.1 to 1.4.5, and I can't seem to get buttons to apply the styles for the class ui-mini with the dependencies in the proper order (as far as I'm aware).

//default JQM CSS:
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

//custom theme from ThemeRoller:
<link href="https://dev.domain.com/css/themes_145/theme_145.min.css" />

//JQuery and JQM JS:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Keeping things simple as can be, just the barebones CDN files and my custom theme above, and a page div with a single button inside:

<div data-role="page" data-theme="a">
<a class="ui-btn ui-mini ui-icon-arrow-r ui-corner-all ui-btn-inline ui-btn-icon-left">BUTTON</a>
</div>

Upon inspection, I see that the reduced font sizes and padding afforded by the ui-mini class are being overridden by the custom theme css, which is weird since, if I move the theme css before the JQM css, the theme itself is overridden (as I would have expected), but in any other case the ui-mini styles are not applied. The custom theme is freshly downloaded from Themeroller.

Am I misusing the custom theme somehow? This setup worked like a charm in 1.2.1, and I'm not seeing how that particular part has changed in this version.

Here's a fiddle demonstrating the issue.

I'm stumped here. Anyone see where I've got it wrong?

Upvotes: 0

Views: 308

Answers (1)

Halfacre
Halfacre

Reputation: 585

Okay, I had the structure entirely wrong. Had to go back to the instructions on themeroller and load the structure and icon pack separately.

  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Upvotes: 1

Related Questions