Bug: problems when creating a map inside display:none element

This has been reported several times by users: #72 and #63

Here is a working example of the problem: http://jsfiddle.net/VqwUZ/361/ We hide the container, draw the map, then show the container. As a result, no text is visible on the legend, and the map is not set to the screen width (a resize of the window is needed to force redraw).

This is related to Raphael issue DmitryBaranovskiy/raphael#760

If you call getBBox() to get the bounding box of a text element when the whole Raphael element is hidden (e.g. if it is inside a <div> with display: none) then the properties of the returned object are all set to NaN rather than the actual bounding box values of the element.

My solution was to avoid using display:none and prefer using this kind of class:

.map_hide {
    /* display:none is doing some weird stuff on SVG
     * Solution: hide it, then position it far away
     */
    position:absolute !important;
    visibility: hidden !important;
    top:-1000px !important;
    left:-1000px !important; 
}

However, when using a CSS framework such as Bootstrap, you may not be able to change the behavior of certain element. I don’t know what we can do.

[Indigo744]

Hello

Instead of using display: none as usual to hide a tab, you should use the tab_hidden class below. Essentially, it moves the element far away so it is not seen by the user.

You just need to toggle the tab_hidden class to the tab element.

/* Default tab style, may not be needed */
.tab {
    position: static;
    visibility: visible;
    top: 0;
    left: 0; 
}
/* Hidden tab style, to be toggled to show/hide tab */
.tab_hidden {
    /* because display:none not compatible with Mapael */
    position:absolute !important;
    visibility: hidden !important;
    top:-1000px !important;
    left:-1000px !important; 
}

[inqdev03]

Well, I post this here if anyone will face this issue : Under Bootstrap :

$('a[href="#idTab"]').on('shown.bs.tab', function (e) {
$(".worldMap").mapael(...)};
}