Maps in Tabs

Hello there! Sorry you’re having some troubles. I tried to visit your links but unfortunately they seem to be down or not loading at all for me. Can you double-check that?

As for this kind of issue in general, it’s hard to control what Divi is doing when it comes to tabs. My guess is that they have multiple sizes going on as the tabs resize to fit the window, and it happens to be that when Mapster loads it gets caught in a certain tab size and stuck there afterwards. The maps don’t ever preload at a smaller size or anything, they will always take the settings you set in the map creation screens.

It is possible to try to force the maps to load at the proper width. If you are comfortable with Javascript, you could hook into the proper click event (maybe that’s a click on the tab as you described), then make sure the size of the maps is set to 100% width and your desired height. Then, call map.resize() which will check the size of the map and trigger a re-render.

Let me know if this helps or if I can offer more advice.

I’m not sure… the links seem to work for me.

Hi, they seem to work now — maybe it’s a staging thing. Anyway, I’d advise just calling the map.resize() method a short time after the user clicks the tab. I suspect that Divi loads the tabs as a small size and sets them to full width later, on click — which for most content wouldn’t matter, but for a map does. I can see that the container for the map is the correct size, so I suspect it would just take a map.resize() timed correctly to fix it.

Note that you’d have to target the right map for it to work — see https://wpmaps-docs.mapster.me/for-developers/javascript-hooks or https://wpmaps-docs.mapster.me/for-developers/custom-scripts

• This reply was modified 8 months, 2 weeks ago by mapster.

Right okay… I’m not a programmer, so it’s not easy to understand what I can do with the map.resize(). I would prefer to use the second tab method, which I found here.

https://divilover.com/creating-custom-tabs-icons-using-blurbs/

If you could take a quick look, maybe this would help you to give me a bit more programming advice. Sorry for the problems with this …I do appreciate you time.

Maybe this is easier for you… the script and style I trying to use. Thanks again

<script>
jQuery(document).ready(function($) {

 /* Blurbs as Tabs */
 
 $('.tab-title').each(function () { 
 
 var section_id = $(this).find("a").attr("href");
 $(this).find("a").removeAttr("href");
 
 $(this).click(function() {
 
 $(this).siblings().removeClass("active-tab");
 $(this).addClass("active-tab");
 $('.tab-content').hide();
 $(section_id).show();
 });
 
 });

});
</script>

<style>
/* -------------------------------------------- 
 ------ Blurbs as Tabs Custom Styling ------
 -------------------------------------------- */

/* Style the Blurbs Tabs */
#blurb-tabs .et_pb_column {
 display:flex;
 align-items:center;
 justify-content:center;
 flex-wrap:wrap;
}
#blurb-tabs .tab-title {
 width:25%;
}

/* Hover Styles for Blurb Tabs - Titles */
#blurb-tabs .tab-title {
 transition:all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
 cursor:pointer; 
 background:#222; /* Tab hover background color */
}
#blurb-tabs .tab-title.active-tab {
 background:#D9DFE2; /* Active tab background color */
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
 color:#000; /* Active tab title color */
}
#blurb-tabs .tab-title.active-tab .et-pb-icon {
 color:#666!important; /* Active tab icon color */
}

/* Tab Titles Mobile Styles */
@media (max-width: 767px ) {
 #blurb-tabs .tab-title {
 width:50%;
 }
 #blurb-tabs .tab-title .et_pb_main_blurb_image {
 margin-bottom:10px; /* Reduce icon bottom margin */
 }
}

@media (max-width: 479px ) {
 #blurb-tabs .tab-title {
 width:100%;
 }
 #blurb-tabs .tab-title .et_pb_blurb_content { /* This moves icon to the right */
 display:flex;
 align-items:center;
 justify-content:flex-start;
 }
 #blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fix icon margins on mobile */
 margin-bottom:0;
 margin-right:30px;
 }
}

/* Hide the tabs content/sections */
.tab-content {
 display:none;
}
</style>

Hi there… I’m sorry but I just can’t dive into your installation and write a lot of custom code here to make things work. This would require someone who can do some programming to work on the site. The underlying issue unfortunately is with how Divi creates tabs in the DOM, and not with the plugin. I wish I could help you more but it’s just too much beyond the level of free support!