ContentPane region attribute not working

Wei-HsinFu · ‎07-01-2011

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'">
            
            <div id="titlePane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
                <h1 align="center">Ancient Theaters in Italy</h1>
            </div>
            
            <div id="mapPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:900px; height:600px">
            </div>
            
            <div id="timesliderPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
                Time slider here
            </div>
        </div>
    </body>
</html>

HemingZhu · ‎07-01-2011

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'">
            
            <div id="titlePane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
                <h1 align="center">Ancient Theaters in Italy</h1>
            </div>
            
            <div id="mapPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:900px; height:600px">
            </div>
            
            <div id="timesliderPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
                Time slider here
            </div>
        </div>
    </body>
</html>

In BorderContainer layout, top, center, bottom only honor height style not width; left and right panel only honor width style. See Attachment

Wei-HsinFu · ‎07-01-2011

In BorderContainer layout, top, center, bottom only honor height style not width; left and right panel only honor width style. See Attachment

Thank you for taking your time to help me. It solved my problem. Thanks again.