agsjs v2.09 jquery mobile checkbox label problem

[LuciHawkins]

I am trying to create a mobile website and am using the agsjs TOC v2.09  The TOC works fine in my other website but it is not displaying correctly in my mobile one.  The "Labels" are displaying underneath the checkboxes.  Anyone have any hints or tricks?  Not sure if it is a CSS or JS problem with the version of jquery.mobile-1.3.2.min.css I am using.  [ATTACH=CONFIG]29359[/ATTACH]

The website is under construction and can be found at:  http://gis.fwb.org/GISmobile/default.html

Thank you,

Luci

[SteveCole · Accepted solution]

It's definitely CSS related. I played around with it in Firefox & Firebox and was finally able to get things lined up by making two CSS changes.

First, you need to remove the following styling from the Jquery Mobile CSS:
[HTML].ui-checkbox input {
     left: 20px;
     margin: -5px 0 0;
}[/HTML]

Lastly, ADD the following CSS into your agsjs.css file:
[HTML].agsTOCRootLayerLabel {
     margin-left: 25px;
}[/HTML]

That should get things looking more normal. Good luck!

Steve

[LuciHawkins]

Thanks Steve, I have played around with the CSS some and it is better but I still have some tweaking to do.

Thanks again,

Luci