How to solve CSS conflicts using jQTouch

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:



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


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:


$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.

  • Any ideas on integrating JQTouch with Google Maps API v3 on PhoneGap? I have a problem where the first time you go to a map, you see the map. Anytime you go to that map page after moving away from it, the map is gone. I have a simple example if you would like to see it.

    Thx

  • I’m going to work on an iPhone app which will use maps, maybe I will create something interesting, but I don’t know :^)

    …anyway, I will take a look to your example if you give me a link

  • Gene

    A trunk jQTouch does not have this issue. Now all jQTouch content is wrapped inside “#jqt” div.

    You can grab latest sources from the SVN:

    http://code.google.com/p/jqtouch/source/checkout

  • Steve

    I had a problem using Firebug Lite in Google Chrome and this solution solved it too.

  • Thanks…this looks good!

  • Hey dave..
    i have the same problem with spinningwheels, but i don’t understand how to solve…

    can u help me??

    can u past more code??

    tnx in advance..

  • Hi Dave,
    Hopefully you can help me. I am trying to integrate the Datepicker from the UI in JQuery. My web app however is built with JQTouch. When I did as you suggested, it fixed the problem :), however now all my div pages show up on my webpage. :( Is there something I missed.

    Thanks!

  • Hi,

    Would it be possible for you to zip/or post, the modified code as a noob like me wouldn’t be able to correctly reflect all the changes properly..

    would be much appreciated. Thanks man!

  • Daveed

    I tried changing jqtouch.js, jqtouch.css and adding a wrapper in the HTML. Yet, jQTouch covers up content outside the wrapper. Can you give a move detailed explanation of exactly what version jQTouch was used and exactly which files were changed. Better yet, how about some actual code?