Select to view content in your preferred language

Use tabs to switch map views

811
2
Jump to solution
04-06-2022 10:08 AM
Labels (1)
Caitlin_Dickinson
Occasional Contributor

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!

0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

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

 

View solution in original post

2 Replies
KittyHurley
Esri Contributor

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
Occasional Contributor

Fantastic! Thank you @KittyHurley for the quick fix! 

0 Kudos