Adding Jquery Mobile breaks CSS

Question

When I add Jquery mobile to my HTML using CDN;

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

It completely takes over my styles & breaks my design.

Is there anything I can do so that way its not using Jquery's CSS for my whole project?

We need more of your code to answer the question. But do you include your own styles before or after the jQuery mobile styles? If you do try to include your own styles last. This very easy to forget, I know because I do it myself, a lot... — rockhopper
– rockhopper, Commented Nov 21, 2014 at 17:27
Well I'm only adding jquery for one particular feature, a popup menu for a Settings button in my web-app. I don't want it to override my current styles for text areas and buttons. It even changes my background. — CodeSpent
– CodeSpent, Commented Nov 21, 2014 at 17:33
Create your own popup rather than adding JQM just for one widget. JQM is a framework, it will change your website entirely. — Omar
– Omar, Commented Nov 21, 2014 at 17:40
The most conflicting one in any css framework will be box-sizing: padding-box. I think you are not applying this style. Make this inheriting property to go by overriding with box-sizing: content-box. — Mr_Green
– Mr_Green, Commented Dec 13, 2015 at 4:26

Yargo.ar · Accepted Answer · 2015-12-13 04:22:40Z

2

The jquery.mobile.css has a lot of classes and attributes that can be in conflict with your classes puting properties diferents that properties that you are expect for each tag or class.

answered Dec 13, 2015 at 4:22

Yargo.ar

8310 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Szél Lajos · Accepted Answer · 2019-05-29 05:20:25Z

0

According to my experience including jquery.mobile.css alone is harmless, the trouble comes when the - mostly unnecessary - jquery.mobile scripts are loaded. The solution was using only those functions that are required, in my case 8k vs 200k and the problem was gone.

More details here (since I can't comment):

jQuery Mobile breaks links. What is the correct use?

answered May 29, 2019 at 5:20

Szél Lajos

4494 silver badges12 bronze badges

Collectives™ on Stack Overflow

Adding Jquery Mobile breaks CSS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related