ACF Tabs and maps

[lizeidsness]

Scenario: ACF Field group. Vertical tabs. geometa-acf field in second or subsequent tab. When my field is in the first tab it's not a problem.

Problem: Basemap is aligned at top left of page. Though it's glitchy. A slight resize of the browser window fixes the issue.

Checked:

• I have checked the DOM of the HTML output of the form, and it's fine, just reordered.
• i am trying various events to cause this to fix itself but i'm stuck.

[stuporglue]

Next round of updates I can look into this more closely, but for now,

What you'll want to call is mapobj.map.invalidateSize();.

You should be able to find the mapobj in window.leafletphp.maps, which is a dictionary. The map is given a random ID each time, so you could to do something like this:

jQuery('#mytabs').on('tabchange',function(e){  // <--- Or whatever the tab change event is
    for(mapobj in window.leafletphp.maps){
         mapobj.map.invalidateSize();
    }
});

[lizeidsness]

Thanks for the quick response! It generally worked, but I had to tweak a bit. I think the solution could be better, but this is all I can do for now. The click event of the tab was what I attached to, because i didn't now how to attach to the tab block being made visible. I added a delay though because on click the block isn't yet visible and invalidateSize wasn't working. Unless I clicked again.

Also The event fires twice when I click on the tab. No idea why. My selector is pretty specific.

This is what I ended up with:

jQuery("#acf-group_5a9ea4efe5997 .acf-tab-wrap [data-key='field_5a9ea930ce67f']").on("click",function(e){ 
  setTimeout(function() {
    for(mapobj in window.leafletphp.maps){
      m = window.leafletphp.maps[mapobj].map;
      m.invalidateSize();
    }
  }, 100);
});