[Gelöst] Bootstrap modal not appearning when Toolset Maps in fullscreen mode

[Author]

Artikel

[stuart]

I have a map with markers, and when clicking these markers it pops up a standard maps bubble with more data - there is button in there that pops up a full-screen modal which works fine.

However, its not working when maps is in FullScreen mode - and i would like it to for the client, nothing appears.

I haven't found anyone else reporting the issue on the forum but there is something in google about it - link: https://stackoverflow.com/questions/47247907/google-map-in-fullscreen-with-bootstrap-modal

So I am unsure if its a Toolset thing or Google Maps thing...

I tried to make it work, but it didnt... so I thought Id ask if this is something that you have come across before? or have a resolution for ideally 🙂

I will continue to work on it and post a solution if i find one.

[Waqar Supporter Languages: Englisch (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

This is related to how Google Maps shows the content in the full-screen mode in general and not something specific to Toolset. But we do our best to guide in the right direction, whenever possible.

The challenge is that Google Map places its own inner divs in full-screen mode and everything that is outside of that div is not visible. I was able to make this work on my test website, by using the suggestions from this thread:
https://stackoverflow.com/questions/39644061/html-element-on-top-of-full-screen-google-map

1. I wrapped the entire content of the modal inside a special div with class "customPanel":

<div class="customPanel">
<!-- Modal -->.....
</div>

2. Next, I included the following script in the content template's JS editor, which copies the content of this special div into the first div of the Google map:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed', function( event, data ) {
jQuery('.customPanel').clone().appendTo(jQuery('.wpv-addon-maps-render').find('div')[0]);
});

3. To make sure that this special div's content stays visible when loaded in the full-screen mode, I also included this custom CSS code in the content template's CSS editor:

.wpv-addon-maps-render .customPanel {
  z-index: 999999;
  position: relative;
}

I hope this helps and please let me know if any step is not clear.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar