Jvectormap very small on div change

Question

I have two divs, one with the world map and one with the US map. When the USA is clicked on the world map I want to hide that div and bring the US map into view.

This wo

Answer 1

The problem is that the div with the US map is hidden, therefore it cannot calculate the map size (width) correctly. Instead you can css that div to have the height:0.

I encountered this issue using Highcharts, same for jvectormap. Below code fixed the issue (using bootstrap):

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 
/* bootstrap hack end */