HiI 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>
