nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

TabContainer in Titlepane

GWReid

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

tabcontainer.jpg

Vind meer berichten getagd met

Accepted answers

All comments

RobertScheitlin__GISP

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.

baohuachu3

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

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

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

GWReid

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.

khutchins

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>

GWReid

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

khutchins

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.