Skip Navigation

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

This support ticket is created vor 1 Jahr, 7 Monate. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 1 Antwort, has 2 Stimmen.

Last updated by Waqar vor 1 Jahr, 7 Monate.

Assigned support staff: Waqar.

Author
Artikel
#2086379

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.

#2088087

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