How to solve CSS conflicts using jQTouch

Davide Zanotti — Sat, 02 Jan 2010 16:55:40 +0000

In these days I’m developing my first iPhone application, using frameworks like PhoneGap and jQTouch. This aims to be a powerful app, not a mere widget, so I’m writing a lot of code and I’m using several libraries and components in order to create a really native-like application.
Unfortunately, due to a bad CSS approach, I faced an issue with the excellent SpinningWheel component which won’t never be displayed unless you open and modify jQTouch CSS. The fact is that, jQTouch takes the body and use it as main container to hold all application’s pages and components and by default it hides all nodes inside the body except the current displayed content (active page/section) and this is a problem, because SpinningWheel create the ui object into the body and it won’t be displayed.
Fortunately the solution is simple, we just need a wrapper, an html element which will holds all jQTouch stuff in place of body, so in my html I wrapped all inside this:

1
2
3
4
5

Then I changed all jQTouch CSS, to reflect this approach (you can see the wrapper as a sandbox):

1
2
3
4
5
6
7
8
9
10
11

div#jqtouch-wrapper > * {
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
display: none;
position: absolute;
left: 0;
width: 100%;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
min-height: 420px !important;
}
/* ...and so on*/

…and finally I changed jQuery selectors inside JavaScript code:

1 2	$body = $('#jqtouch-wrapper'); // ...and so on

It’s also possible to solve the conflict by changing SpinningWheel code in order to put the dom node inside active jQTouch pages, but the problem of potential incompatibilities will remains. A CSS declaration, except reset statements and other rare cases, should NEVER refers directly to a whole set of nodes (ie: ul { color: red; }), but to a node type contained by a wrapper/sandbox (ie: #foo ul {color: red; }), thus conflicts will be avoided.

DaveOnCode » jqtouch

How to solve CSS conflicts using jQTouch