changing my jquery mobile theme changes my css styling

css, html, javascript, jquery-mobile

Solution

You need to upgrade `theme-classic.css` using jQuery Mobile ThemeRoller.

- Go to download page and scroll down to "Legacy versions"

- Under version 1.3.2 - CSS open Uncompressed with Default theme: jquery.mobile-1.3.2.css, copy its' content.

- Go to jQuery Mobile ThemeRoller, from top toolbar, click "Import or upgrade". A new window will open

- On that window, paste 1.3.2 CSS styles. From selectmenu, select "Upgrade to version 1.4.5" and then click "Import" button

- Review copied themes, do changes if you want. Once done, click "Download" from top toolbar, give your theme a custom name and download upgraded classic themes.

Place new theme and other dependencies in the following order

<head>
  <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>
</head>

Demo

Problem

I have a collapsible set that I create on my website which looks similar to this: ``` <div data-role="collapsible-set" id="result" style="margin: auto; padding-top: 50px; padding-bottom: 20px;"> <div> <h2> <span style="font-size: 16px; font-weight: bold; white-space: pre-wrap;" id="title' + num + '">abc</span><br> <span style="font-size: 14px; font-weight: normal;" id="author' + num + '"></span> <div style="font-weight: normal;"> <span style="font-style:italic; font-size: 13px;" id="journal' + num + '"></span> </div> </h2> <div style="font-size: 14px;"> more info </div> </div> </div> ``` However, after I apply a theme to each element I add to the collapsible set, my styling is changed and I can't figure out why. Before I append a div inside my collapsible set I'm adding the following attribute: ``` div.setAttribute("data-theme", "c"); ``` This is what my list item looks like before styling: And here is what it looks like after I add a theme: as you can see, the spacing between each line is now pretty large. I've tried to change the css using padding but that didn't change anything. Could anyone point me in the right direction? Here is a before and after fiddle: Before After

Original source