admin管理员组文章数量:1418083
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>
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
Share Improve this question edited Nov 18, 2014 at 6:13 DannyD asked Nov 18, 2014 at 5:51 DannyDDannyD 2,91116 gold badges57 silver badges78 bronze badges 3- 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-heightvalue of.ui-btnfrom1.3to0.5– Kyojimaru Commented Nov 18, 2014 at 6:20
2 Answers
Reset to default 7You 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
本文标签： javascriptchanging my jquery mobile theme changes my css stylingStack Overflow
版权声明：本文标题：javascript - changing my jquery mobile theme changes my css styling - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745278167a2651297.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论