---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/hiddendiv.md
- https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/hiddendiv.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt
# Hosting maps in the hidden container
Open in CodeSandbox
The map content fills the container it is in. At the time of initialization, the map must be able to detect the dimensions of the container.
If the container isn't ready at the time of map initialization, the map dimensions will be null (0x0), which means that the map won't be visible.
The map is invisible on the inactive jQuery.UI tab because the CSS 'display: none' property is used for hiding tabs.
An element that has 'display: none' doesn't know its actual dimensions. The easiest solution is to initiate calculating map sizes when switching tabs, by calling the fitToViewport() command. Another workaround for the problem in the example (using jQuery.UI) is to use an alternative method for hiding tabs by redefining the standard jQuery.UI classes:
```
- hiddendiv.js
```js
ymaps.ready(init);
var myMap;
function init() {
/**
* Initializing tabs.
* After executing the tabs() command, tab-2 gets style='display:none'.
* The map will be initialized, but the size will be null.
* This is a good thing in this case, since the invisible map won't load invisible tiles.
*/
$("#tabs").tabs();
myMap = new ymaps.Map("tab-2", {
center: [55.76, 37.64], // Moscow
zoom: 10,
});
/**
* We'll recalculate the map size when the new tab is displayed.
* The map will get the maximum possible values when its tab is activated
* and null values when the first tab is selected.
* We'll subscribe to the 'tabsshow' event (not 'tabselect',
* since it requires that the element with the map is already visible).
*/
$("#tabs").bind("tabsshow", function (event, ui) {
myMap.container.fitToViewport();
});
}
```
{% endlist %}