Map gets overlayed over app menu (side menu) when viewed in smart phones

[ashif-ismail]

When i open the demo website in responsive mode in mobile phones, the mapview gets rendered on top of the side menu

steps to reproduce :

1)open the site in phone
2)tap the hamburger icon to open the side menu
3)map overlays over the menu which is open by blocking the side menu option

Kindly suggest a workaround

[gntelakis]

I had the same problem with a few ComboBoxe that underlapped the map when opened. I am not sure if this will help, but the idea was to increase the z-index in a custom css of the elements you need to be ontop(mine was in /src/main/resources/static/css/combobox-styles.css) where you need to specify the z-index in the following form.
:host([theme~="topPopup"]) {
z-index: 9999 !important;
}

Afterwards after initializing the ComboBox(Mine was in Java) e.g.
ComboBox myComboBox = new ComboBox("Some title");
myComboBox.getElement().setAttribute("theme", "topPopup");

and importing the Css in the beginning of the class with the:
@CssImport(value="styles/views/map/combobox-styles.css", themeFor="vaadin-combo-box-overlay")