topic Re: Use tabs to switch map views in Calcite Design System Questions

Use tabs to switch map views

Caitlin_Dickinson — Wed, 06 Apr 2022 17:08:59 GMT

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!

Re: Use tabs to switch map views

KittyHurley — Wed, 06 Apr 2022 21:36:23 GMT

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

Re: Use tabs to switch map views

Caitlin_Dickinson — Wed, 06 Apr 2022 23:46:06 GMT

Fantastic! Thank you @KittyHurley for the quick fix!