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>
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.