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

Arcgis JS:3.20 TabContainer doesn't display in Bottom Panel

gisdeveloper

I am using Arcgis JS Api 3.20 and I have a bottom panel which shows the layer's attribute tables and etc.

I want to use Tabcontainer in that bottom panel but didn't succeed.

Here is my code ( I use esri layers for this example not my own )

Edit fiddle - JSFiddle

I don't know how to use Attribute Table widget, so I decided to write my own one However I got stuck with first step.

I am new to Javascript and Dojo, so any help would be much appreciated. Thank you.

Find more posts tagged with

Accepted answers

thejuskambi

If you look at the dojo documentation, the declarative style works only when you are using parser.parse(). Without which the TabContainer will not be parsed.

Declarative refers to using the dojo/parser to read the DOM and parse out nodes that have been decorated with special attributes as well as interpreting certain <script> tags to extend the behavior of widgets.

Using Declarative Syntax - Dojo Toolkit Tutorial

Regarding the conflict you are facing with Measure, I have not seen it earlier. I shall try to create a sample and check it out.

All comments

thejuskambi

There are few issues you would need to address. The reason the TabContainer is not visible because, you are using the declarative method to add the Tab, but have set the parseonLoad to false. You can either set to true or user parser.parse(); second you need to add the TabContainer and ContentPane to the require so that all the necessary js files are downloaded to the client.

Edit fiddle - JSFiddle made some change to the fiddler and you can see this working.

Once, you have these things the TabContainer will show up properly. But, You will not see the attribute table as the height of the TabContainer is calculated as 0px. It happens because, at the time of initialization you are setting the height of the bottom panel to 0px. Now when you expand the bottom panel, you are using the jQuery to do it. it will not raise event or let the TabContainer know that the size has changed. So you would have to write code to resize the TabContainer and the FeatureTable.

Hope this was helpful.

gisdeveloper

Thanks for your reply.

I did "parseonLoad=false" on purpose because I have Esri Measure module and if I do parser.parse() or parseonLoad=true program sends error like "dojo/parser::parse() error Error: Tried to register widget with id==dijit_layout_ContentPane_0 but that id is already registered". (TabContainer's ContentPane and Esri's ContentPane registers same id. I don't know the reason)

I have searched this error so many times and got the solution to change parseonLoad=false

Do I have to write TabContainer and all its ContentPane's on programmatic like "var tc=new TabContainer".

I just don't know what to do for skip this error.

thejuskambi

If you look at the dojo documentation, the declarative style works only when you are using parser.parse(). Without which the TabContainer will not be parsed.

Declarative refers to using the dojo/parser to read the DOM and parse out nodes that have been decorated with special attributes as well as interpreting certain <script> tags to extend the behavior of widgets.

Using Declarative Syntax - Dojo Toolkit Tutorial

Regarding the conflict you are facing with Measure, I have not seen it earlier. I shall try to create a sample and check it out.

gisdeveloper

Sorry for the late response, I don't know how I didn't see this (my fault ) but I have to thank you for your help.

First of all I was using

var dojoConfig = { parseOnLoad: true } but I changed it parseOnLoad: false and I use "dojo/parser" , parser.parse(); in my Measurement module.

(I wrote "parser.parse();" in wrong module Shame on me.)

And my TabContainer and my Measurement module had successfully worked together.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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