Need layout with Map on left and tab container on the right

JimDickerson — Fri, 13 May 2011 21:22:08 GMT

I took an ESRI sampe layout and tried to modify it so that I have a Map on the left and a TabContainer on the right. The map shows up but there is nothing on the right. Is there something wrong with this layout?

<body class="soria">
      <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">

      <div id="header" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="top">
       HEADER
       </div>

      <div id="map" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center">Map</div>

     <div dojoType="dijit.layout.TabContainer" region="right" tabStrip="true">
                <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                 Stuff
                </div>
                <div dojoType="dijit.layout.ContentPane" title="My second tab">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
                    Lorem ipsum and all around - last...
                </div>
            </div>
            

      <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">
        This is the footer section
      </div>
      </div>
</body>

Re: Need layout with Map on left and tab container on the right

KellyHutchins — Sat, 11 Dec 2021 16:59:26 GMT

You were close - you just needed to assign a width to the right pane that contains the tab. You can do this by setting an id for the tab pane to id="rightPane". The sample associates a css style with this id to set the pane's width to 30%.
Here's the modified code:

<!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" /> 
    <!--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>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/soria/soria.css">
    <style type="text/css">
      html, body { 
        height: 100%; width: 100%; margin: 0; 
      } 
      body{
        background-color:white; overflow:hidden; 
        font-family: "Trebuchet MS"; 
      }
      .roundedCorners{
        -moz-border-radius: 4px;      
      }
      #header {
        border: solid 2px #7EABCD;
        background-color:white; color:peru; font-size:18pt; 
        text-align:center; font-weight:bold; height:60px;
      }
      #subheader {
        font-size:small;
        color: peru;
      }
      #rightPane{
        background-color:white;
        color:peru;
        border: solid 2px cornflowerblue;
        width:30%;
        overflow:hidden;
      }
      #map {
        background-color:white;
        border:solid 2px cornflowerblue;
        padding:0;
      }
      #footer {
        border: solid 2px #7EABCD;
        background-color:white;color:peru;font-size:10pt; text-align:center; height:40px;
      }
      .soria .dojoxGridHeader .dojoxGridCell   {
        color:peru !important;
      }
    </style>
<script type="text/javascript">
  var djConfig = {
    parseOnLoad: true
  };
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2">
</script>
<script type="text/javascript">
  dojo.require("dijit.dijit"); // optimize: load dijit layer
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("esri.map");
  dojo.require("esri.toolbars.draw");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("esri.tasks.query");
  dojo.require("dojox.grid.DataGrid");
  dojo.require("dojo.data.ItemFileReadStore");

  var map, toolbar;
  var featureLayer;

  function init() {
    var initialExtent = new esri.geometry.Extent({
      "xmin": -13092200,
      "ymin": 3691751,
      "xmax": -12538796,
      "ymax": 3880092,
      "spatialReference": {
        "wkid": 102100
      }
    });
    map = new esri.Map("map", {
      extent: initialExtent
    });
    dojo.connect(map, 'onLoad', function(map) {

      dojo.connect(dijit.byId('map'), 'resize', resizeMap);
    });
    var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
    var featureLayerUrl = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0";
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
    featureLayer = new esri.layers.FeatureLayer(featureLayerUrl, {
      mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields: ["region,magnitude,depth,objectid"]
    });
    featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([160, 214, 238])));

    map.addLayer(basemap);
    map.addLayer(featureLayer);
  }

  function resizeMap() {
    //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
    //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_faq.htm
    var resizeTimer;
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      map.resize();
      map.reposition();
    }, 500);
  }
  //show map on load 
  dojo.addOnLoad(init);
</script>
</head>
<body class="soria">
  <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
  style="width:100%; height:100%;">
    <div id="header" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="top">
      HEADER
    </div>
    <div id="map" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center">
    </div>
    <div id="rightPane" dojoType="dijit.layout.TabContainer" region="right" tabStrip="true">
      <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
        Stuff
      </div>
      <div dojoType="dijit.layout.ContentPane" title="My second tab">
        Lorem ipsum and all around - second...
      </div>
      <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
        Lorem ipsum and all around - last...
      </div>
    </div>
    <!-- end TabContainer -->
    <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">
      This is the footer section
    </div>
  </div>
</body>

</html>

Re: Need layout with Map on left and tab container on the right

JimDickerson — Mon, 16 May 2011 20:12:30 GMT

Thanks Kelly,
I didn't see that relationship but I'm catching on.
Jim

topic Re: Need layout with Map on left and tab container on the right in ArcGIS JavaScript Maps SDK Questions

Need layout with Map on left and tab container on the right

Re: Need layout with Map on left and tab container on the right

Re: Need layout with Map on left and tab container on the right