Tabs in ESRI Popup

Question

I am trying to get popup's working in my esri JS map and I have the tab's mostly working but I am missing a resize function to have the tab container sized properly on load. When I click a polygon and the popup appears the tab headers are visible but not the content. I need to click a tab in order for the content to appear. How do i remedy that?

I have simplified map that you can see my code here http://maps.ducks.ca/pmv/

Lastly any idea how I can populate that last tab with the URL's to the attachments? Essentially i'd like to put the "showAttachments" info inside the tab rather than below it.

Answer 1

Two things to fix the tab container issue:

1. use doLayout: false when creating your tab container
2. set up a selection-change event listener to resize your tab container on the fly

For #1:

var tc = new TabContainer({
  style: "height: 100%; width: 100%;",
  useMenu: false,
  doLayout: false,
  useSlider: false
}, domConstruct.create("div"));

For #2:

app.map.infoWindow.on("selection-change", function(e) {
  if (e.target.features) {
    query(".dijitTabContainer", this.domNode).forEach(function(node) {
      var tc = registry.getEnclosingWidget(node);
      if (tc) {
        tc.selectChild(tc.getChildren()[0]);
        tc.resize();
      }
    });
  }
});

In the snippet above, query is an alias for dojo/query and registry is an alias for dijit/registry. Make sure you add those to your require().

For the showAttachments stuff, I don't see that in your current code and it's better to ask that as a separate question (try to stick to one question per thread here).