When I use DMX googlemaps inside a DMXtab the map gets corrupted.
Apparently it is a common problem and easy to fix but I am no good at jquery. There are lots o f solutions and suggestions online and it seems that simple reinitialising the map after the tab has loaded is one solution but I have no idea where to add any code in the DMX tab script.

HAs anyone else solved this or can anyone help?

Hello Dave.

Can you provide us with link to the page in your question in order for us to inspect your code?

Regards : Vulcho.

www.conwydeals.com/user.php?id=27

Any ideas?

Hello here is the workaround :

Seems like there is a bug in the jquery library.

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via
display: none
so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize the map once the tab is displayed like this:

$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab" {
resizeMap();
}
});
resizeMap() will call Google Maps' checkResize() on the particular map.

Thanks.

I have tried that but I can't make it work. Perhaps I am putting

.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}

in the wrong place.

I am using the cupertino style so I popped it at the enr of the cupertino.css style sheet.

Is that right?

Thanks.

I have tried that but I can't make it work. Perhaps I am putting

.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}

in the wrong place.

I am using the cupertino style so I pasted that at the end of the cupertino.css style sheet.

Is that right?

But it doesn't work. The map still doesn't really show properly. Can you tell me if I pasted the code in the right place or not?

Thanks

Hello Dave.

Sorry for the late reply, you need to replace in curpentino the following line of code :

.ui-tabs .ui-tabs-hide { display: none !important; }

should become :

.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px;}

Regards: Vulcho.

Perfect!
It works brilliantly now.

Thanks very much for your help