StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I saw this question, and had to stop to give the correct answer, and spare the pain I went through over a year ago trying to come up with a standard way to address CSS formatting conflicts with JQM styles. I hope this will save all of you some of the hair I lost back then figuring this out.</p> <p>The solution lies in CSS specificity. All you need to do with any formatting conflict in JQM is to first apply an id to the element you wish to override JQM formatting with your own CSS.</p> <p>Next, in your own CSS, specify that the class be applied to the <strong>id</strong> of the container.</p> <pre><code>#img_button_1 .ui-btn-inner {border: none !important;} </code></pre> <p>It's as simple as that.</p> <p>One more important thing, and that is that load order of the external CSS files is significant, and you will want to load your own CSS <strong>after</strong> JQM CSS.</p> <p>I have forked a working example of Ryans jsFiddle to show the small difference to his solution, which was at least on the right track here in this post.</p> <p><a href="http://www.wikipicplus.com/JQM_CSS_Overide_Example.html" rel="nofollow">http://jsfiddle.net/Z8Xnx/14/</a></p> <p>Another added benefit with this approach, is you do not have to alter the JQM CSS at all, and can leave it alone. I have successfully used this approach to resolve every JQM CSS conflict I have run across since figuring out this specicivity requirement issue. Hope this helps everyone with an easy solution to their JQM style conundrums.</p> <p>** <strong>UPDATE</strong> **</p> <p>It has been noted to me that this method does not work with the latest version of JQM (1.3.0b1), and that is not correct. I have investigated and found this to be a problem with the imlementation of this version of JQM at jsFiddle. To prove this, I have put up an example page on my own space with the exact same code as that shown in the jsFiddle example. This means as of my writting, you really can't trust anything at jsFiddle using the lastest version of JQM from the options. Just a heads up, and you can find the working implementation at...</p> <p><a href="http://www.wikipicplus.com/JQM_CSS_Overide_Example.html" rel="nofollow">jQuery Mobile CSS Override Example</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload