topic Re: agsjs v2.09 jquery mobile checkbox label problem in ArcGIS JavaScript Maps SDK Questions

agsjs v2.09 jquery mobile checkbox label problem

LuciHawkins — Tue, 26 Nov 2013 13:33:48 GMT

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

Re: agsjs v2.09 jquery mobile checkbox label problem

SteveCole — Tue, 26 Nov 2013 16:19:50 GMT

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

Re: agsjs v2.09 jquery mobile checkbox label problem

LuciHawkins — Wed, 27 Nov 2013 13:20:08 GMT

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