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> 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" }); }); var dojoConfig = { parseOnLoad: true }; 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(); }); html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } Regards, Manila

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; } } }

Beginner trying to create two tabs

ManilaChaturvedi

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

Vind meer berichten getagd met

Accepted answers

All comments

JasonZou

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>

ManilaChaturvedi

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

JasonZou

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>

ManilaChaturvedi

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

kenbuja

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.

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.