Use tabs to switch map views

[Caitlin_Dickinson]

I'd like to use the calcite-tab component to switch between two (or more) map views. However I'm having trouble getting a map view div to display in the content area underneath the tab (code).

All of the examples in the documentation and this Esri Community space just show text (e.g. "Tab 1 content") in the content area. Is it possible to place a div here that contains a map view rather than just text? Is there something i'm missing in either the css or the html for configuring the div, or a different component I should be using to achieve this functionality? 

Thank you!

[KittyHurley · Accepted solution]

Hi @Caitlin_Dickinson, a small CSS modification to the map div's should get them to display as-expected.

In changing their heights in the CSS from 100% to 100vh, both div's should display in the calcite-tabs.

For instance:

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#mapColorDiv, 
#mapGreyDiv {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
}

[Caitlin_Dickinson]

Fantastic! Thank you @KittyHurley for the quick fix!