javascript - changing my jquery mobile theme changes my css styling

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

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>

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

Share Improve this question edited Nov 18, 2014 at 6:13 asked Nov 18, 2014 at 5:51 DannyD 2,91116 gold badges57 silver badges78 bronze badges

Provide it in a fiddle. it ll be easy to chk for us – Gibbs Commented Nov 18, 2014 at 5:52
I have added two fiddle's. thanks – DannyD Commented Nov 18, 2014 at 6:00
1 try changing the line-height value of .ui-btn from 1.3 to 0.5 – Kyojimaru Commented Nov 18, 2014 at 6:20

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

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 Unpressed 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./mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery./jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery./mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

Demo

Applying a theme changes the look and feel of HTML elements as here

div.setAttribute("data-theme", "c");

data-theme might be having a CSS class of its own which is effecting your webpage design

Are you using any CSS framework like BootStrap? Try adding this theme element to the exact div where you wish a design change

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745278168a4620152.html

javascript - changing my jquery mobile theme changes my css styling - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - changing my jquery mobile theme changes my css styling - Stack Overflow

2 Answers 2

相关推荐