topic Re: Beginner trying to create two tabs in ArcGIS JavaScript Maps SDK Questions

Beginner trying to create two tabs

ManilaChaturvedi — Tue, 20 Aug 2013 18:37:14 GMT

Hi,

I have just started with ArcGIS amd learning dojo. I mixed the creation of map which was working with code to create two tabs but I am not getting the tabs. Can someone point out whats going wrong ? Thanks for the help.
!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
        console.log('abc');
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
    map = new Map("mapDiv", {
      center: [-56.049, 38.485],
      zoom: 3,
      basemap: "topo"
    });
});
    </script>
    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script>
require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(TabContainer, ContentPane){
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
         title: "Food",
         content: "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new ContentPane({
         title: "Drinks",
         content: "We are known for our drinks."
    });
    tc.addChild(cp2);

    tc.startup();
});
</script>

<style>
html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
}
</style>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

Regards,
Manila

Re: Beginner trying to create two tabs

KenBuja — Sun, 12 Dec 2021 01:30:29 GMT

Hi Manila,

Your page doesn't have a div named "tc1-prog" to put the tab container. You also added the JSAPI script twice.

<body class="claro">
    <div id="mapDiv"></div>
    <div id="tc1-prog"></div>
</body>
</html>

Here's an example of putting a tab container into a infoWindow (although the tabs are not rendered correctly).

Also, if you post code in the forum, please put it into a

 block using the # button above. It makes it easier to read.

Re: Beginner trying to create two tabs

ManilaChaturvedi — Tue, 20 Aug 2013 20:12:04 GMT

Hi Kenbuja,

Thanks for the quick reply. But its not working. I also found this mistake after putting the post in the forum but its not working still.

Manila

Re: Beginner trying to create two tabs

JasonZou — Sun, 12 Dec 2021 01:30:32 GMT

This should work:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
  <style>
   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
       overflow:hidden;
   }
   #mapDiv {
    width: 100%;
       height: 100%;
   }
  </style>
  <script>
   var dojoConfig = {
    parseOnLoad : true
   };
  </script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script>
   console.log('abc');
   var map;
   require(["esri/map", "dojo/domReady!"], function(Map) {
    map = new Map("mapDiv", {
     center : [-56.049, 38.485],
     zoom : 3,
     basemap : "topo"
    });
   });
  </script>


  <script>
   require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(BorderContainer, TabContainer, ContentPane) {
    var tc = new TabContainer({style: "height: 100%; width: 100%;"}, "tc1-prog");

    var cp1 = new ContentPane({
     title : "Food",
     content : "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new ContentPane({
     title : "Drinks",
     content : "We are known for our drinks."
    });
    tc.addChild(cp2);

    tc.startup();
   });
  </script>

 </head>
 <body class="claro">
  <div id="mainContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" style="width:100%; height:100%">
   <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'leading'" style="width: 200px;">
    <div id="tc1-prog"></div>
   </div>
   <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
    <div id="mapDiv"></div>
   </div> 
  </div>  
 </body>
</html>

Re: Beginner trying to create two tabs

ManilaChaturvedi — Sun, 25 Aug 2013 18:55:42 GMT

HI Jason,
Thanks a lot for correcting the code. But my map is like clipped half way. Is it because of the overflow property. even though I remove it it still does not show fully.

Thanks,
Manila

Re: Beginner trying to create two tabs

JasonZou — Sun, 12 Dec 2021 01:30:35 GMT

Change mapDiv style as:

#mapDiv {
 width: 100%;
 height: 100%;
 overflow: hidden;
}

Change BODY as:

 <body class="claro">
  <div id="mainContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" style="width:100%; height:100%">
   <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'leading'" style="width: 200px;">
    <div id="tc1-prog"></div>
   </div>
   <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
    <!--<div id="mapDiv"></div>-->
   </div> 
  </div>  
 </body>