In BorderContainer layout, top, center, bottom only honor height style not width; left and right panel only honor width style. See Attachment
I am new to the API and get stuck on something that seems very straightforward. I have three content panes in a bordercontainer. I use the region attribute to specify their locations on the page, but the specs seem to be ignored by the browser (tried on FireFox so far). No matter what locations I specified the browser always place the three content panes from top to bottom in the order the <div> elements appear in the HTML document. Any suggestions? Here is my HTML doc. Thanks a lot. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ancient Theaters in Italy</title> <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css"> <style> #titlePane { width: auto; height: 50px } #timesliderPane { width: 60px; height: 50px; padding: 5px } </style> <script type="text/javascript" data-dojo-config="parseOnLoad: true; isDeBug: true" </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"> </script> <script type="text/javascript"> dojo.require("dijit.layout.ContentPane") dojo.require("dijit.layout.BorderContainer") dojo.require("dijit.layout.AccordionContainer") dojo.require("esri.map"); dojo.addOnLoad(init); var map; function init(){ map = new esri.Map("mapPane"); var basemapURL = "https://arcgis.its.carleton.edu/ArcGIS/rest/services/ItalyTheaters/MapServer" var basemap = new esri.layers.ArcGISDynamicMapServiceLayer(basemapURL); map.addLayer(basemap); } </script> </head> <body class="claro"> <div id="pageContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"> <!-- TOP TITLE PANE--> <div id="titlePane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"> <h1 align="center">Ancient Theaters in Italy</h1> </div> <!--CENTER MAP PANE--> <div id="mapPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:900px; height:600px"> </div> <!--BOTTOM TIME SLIDER PANE--> <div id="timesliderPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'"> Time slider here </div> </div> </body></html>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
