Zoom Slider Bar layout problem when a page CSS with table width: 100% is added.

GertConradie — Fri, 02 Nov 2012 17:26:35 GMT

Hi

I need to add a map using the JS API into an intranet page - where there is already a CSS definition for table that set the table width to 100%. This cause the Zoom bar layout to break. (Not the functionality)

Now if I added a 'dijit.form.VerticalSlider' to the same page, the same problem occur - and can be fixed by setting the width manually. See the vertical slider example http://dojotoolkit.org/documentation/tutorials/1.6/sliders/ and use "style: 'height: 200px; width: 1px;'" as per my example below.

When I attempt to do the same by using the ESRI example on here, it place the zoombar horizontal.

Anyone with recommendations how to resolve please?

I did find that if I override the CSS style below, things look right, but there is still an invisible div or something over the map that stop any mouse movements while digitising - so not useable...

.dijitSliderButtonContainer  {     width:10px ; }

A complete example below to play with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Map Slider Position and Height</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />     <style>              table {     width: 100%;     }     </style>          <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>     <script type="text/javascript">         dojo.require("esri.map");          function init() {             //esriConfig.defaults.map.slider = { left: "10px", top: "10px", width: "1px", height: "200px" };              var map = new esri.Map("map", {                 nav: false             });             map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));         }          dojo.addOnLoad(init);                   // Require the slider class         dojo.require("dijit.form.VerticalSlider");          // When the DOM and resources are ready...         dojo.ready(function () {             // Create the vertical slider programmatically             var vertSlider = new dijit.form.VerticalSlider({                 minimum: 0,                 maximum: 100,                 pageIncrement: 20,                 value: 20,                 intermediateChanges: true,                 style: "height: 200px; width: 1px;"             }, "vertSlider");              // Start up the widget             vertSlider.startup();         });      </script>   </head>     <body class="claro">         <div id="vertSlider"></div>         Configure map slider's orientation         <div id="map" style="width:500px; height:500px; border:1px solid #000;"></div>     </body> </html>

Re: Zoom Slider Bar layout problem when a page CSS with table width: 100% is added.

derekswingley1 — Fri, 02 Nov 2012 17:50:23 GMT

Other than not defining a width for all tables, you could explicitly specify a width on the table that makes up the zoom slider. You would use one of the classes specific to the table that makes up the slider. Something like:

table.dijitSlider { width: 50px; }

In action: http://jsfiddle.net/RpdM8/

Re: Zoom Slider Bar layout problem when a page CSS with table width: 100% is added.

GertConradie — Mon, 05 Nov 2012 07:40:08 GMT

Thanks, that was the fix. Appreciated!

topic Zoom Slider Bar layout problem when a page CSS with table width: 100% is added. in ArcGIS JavaScript Maps SDK Questions

Zoom Slider Bar layout problem when a page CSS with table width: 100% is added.

Re: Zoom Slider Bar layout problem when a page CSS with table width: 100% is added.

Re: Zoom Slider Bar layout problem when a page CSS with table width: 100% is added.