TabContainer in Titlepane

GlenReid · ‎01-05-2011

Seems simple. I'm adding a tabcontainer into a titlepane on top of the map. Using claro.

 <div id="test" style="position:absolute; left:45px; top:65px; z-Index:999; display:block;">
  <div dojoType="dijit.TitlePane" id="tp" title="Test" open="true" style="width:300px;" closable="false">
   <div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
    <div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
     Tab 1 content
    </div>
    <div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
     Tab 2 content
    </div>
    <div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
     Tab 3 content
    </div>
   </div>
  </div>
 </div>

I get some weird horizontal bars as part of the tabcontainer (see attached image). Any idea what is causing this? Also, the content of the selected tab (Tab 1) doesn't show up until I click it.

Thanks,
Glen

KellyHutchins · ‎01-05-2011

I created a quick test page and wasn't able to reproduce the issue. I have seen a similar issue when trying to display a tab container in a closed title pane, but it doesn't look like that's the case in your 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"> 
    <!--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.1/js/dojo/dijit/themes/claro/claro.css">    
    <style type="text/css"> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
    </style> 
    
    <script type="text/javascript"> 
      var djConfig = {
        parseOnLoad: true
      };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></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("esri.map");
      dojo.require("esri.virtualearth.VETiledLayer");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
      dojo.require("dijit.layout.TabContainer");
      
      var map = null;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-11727455.861413078,"ymin":4861652.558126574,"xmax":-11706340.132349325,"ymax":4871512.934775349,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(initBasemap);
        
        createBasemapGallery();
        dojo.connect(dijit.byId('map'), 'resize', resizeMap);
      }

      function createBasemapGallery() {

        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          bingMapsKey: 'Av1bH4keF8rXBtxWOegklgWGCYYz8UGYvBhsWKuvc4Z15kT76xVFOERk8jkKEDvT',
          map: map
        }, "basemapGallery");

        basemapGallery.startup();
        
        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }

      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_guidelines.htm
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }

      //show map on load 
      dojo.addOnLoad(init);
    </script> 
  </head> 

  <body class="claro"> 
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>
    <div dojotype="dijit.layout.ContentPane" region="right" style="width:35%;">
       <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="true">
              <div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
                <div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
                  Tab 1 content
                </div>
                <div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
                  Tab 2 content
                </div>
                <div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
                  Tab 3 content
                </div>
              </div>
        </div>
    </div>

    </div>
  </body> 

  </html>

GlenReid · ‎01-06-2011

Kelly,

Thanks for your reply. I took your code and dropped in on my server and it looked good. As I'm using a full map, I deleted region="right" from the TitlePane's ContentPane:

<div dojotype="dijit.layout.ContentPane" region="right" style="width:35%;">

This creates the issue I'm seeing.

Thanks,
Glen

KellyHutchins · ‎01-06-2011

Glen,

I made a few changes and here's a working version that uses a full-screen map. Basically I put the Title Pane within the map div tags.

 <!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"> 
    <!--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.1/js/dojo/dijit/themes/claro/claro.css">    
    <style type="text/css"> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
    </style> 
    
    <script type="text/javascript"> 
      var djConfig = {
        parseOnLoad: true
      };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></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("esri.map");
      dojo.require("esri.virtualearth.VETiledLayer");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
      dojo.require("dijit.layout.TabContainer");
      
      var map = null;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-11727455.861413078,"ymin":4861652.558126574,"xmax":-11706340.132349325,"ymax":4871512.934775349,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(initBasemap);
        
        createBasemapGallery();
        dojo.connect(dijit.byId('map'), 'resize', resizeMap);
      }

      function createBasemapGallery() {

        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          bingMapsKey: 'Av1bH4keF8rXBtxWOegklgWGCYYz8UGYvBhsWKuvc4Z15kT76xVFOERk8jkKEDvT',
          map: map
        }, "basemapGallery");

        basemapGallery.startup();
        
        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }

      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_guidelines.htm
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }

      //show map on load 
      dojo.addOnLoad(init);
    </script> 
  </head> 

  <body class="claro"> 
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
       <div style="position:absolute;width:500px;height:500px; right:175px; top:10px; z-Index:999;">
       <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="true">
              <div id="tabContainer" dojoType="dijit.layout.TabContainer"  style="width:100%; height:100%">
                <div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
                  Tab 1 content
                </div>
                <div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
                  Tab 2 content
                </div>
                <div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
                  Tab 3 content
                </div>
              </div>
        </div>
        </div>
    </div>
  </body> 

  </html>

GlenReid · ‎01-06-2011

I think I got it. I had my closing map </div> like so:

 <div id="map" dojotype="dijit.layout.ContentPane" region="center">
  <img id="loadingImg" src="images/loading.gif" style="position:absolute; z-index:100; display:none;" />
 </div>

I moved the closing map </div> to below the div that contained the titlepane and that fixed it.

Thanks.

baohuachu3 · ‎11-17-2017

When create tabContainer, can do as below:

var tc = new TabContainer({  style: "width:100%;height:100%;", id:"myTabContainer",useMenu : false, useSlider : false,
}, domConstruct.create("div"));

RobertScheitlin__GISP · ‎11-17-2017

Baohua,

How would you actually place the tab container in your apps dom? The normal purpose of the div in the dijit constructor is place the dijit at that existing div location but since you are dynamically creating an unplaced div you are going to have issues there.

baohuachu3 · ‎11-27-2017

Hi Robert,

In my application I will set the tabcontainer to popup window. So the dom of the container will be attached to infoTemplate.

RobertScheitlin__GISP · ‎11-27-2017

Then the normal process would be to query and get the dom element you are going to attach to and use that in the place portion of the dijit constructor instead of creating a new div element like you are.