topic Re: TabContainer in Titlepane in ArcGIS JavaScript Maps SDK Questions

TabContainer in Titlepane

GlenReid — Wed, 05 Jan 2011 13:03:54 GMT

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

Re: TabContainer in Titlepane

KellyHutchins — Sun, 12 Dec 2021 07:00:45 GMT

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>

Re: TabContainer in Titlepane

GlenReid — Thu, 06 Jan 2011 13:49:35 GMT

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

Re: TabContainer in Titlepane

KellyHutchins — Sun, 12 Dec 2021 07:00:48 GMT

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>

Re: TabContainer in Titlepane

GlenReid — Sun, 12 Dec 2021 07:00:51 GMT

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.

Re: TabContainer in Titlepane

baohuachu3 — Sun, 12 Dec 2021 07:00:53 GMT

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"));

Re: TabContainer in Titlepane

RobertScheitlin__GISP — Fri, 17 Nov 2017 13:33:02 GMT

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.

Re: TabContainer in Titlepane

baohuachu3 — Mon, 27 Nov 2017 08:34:59 GMT

Hi Robert,

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

Re: TabContainer in Titlepane

RobertScheitlin__GISP — Mon, 27 Nov 2017 12:43:04 GMT

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.