Google Map not working in a Tabbed interface

This thread is resolved. Here is a description of the problem and solution.

Problem:
If you add a Google Map to a Bootstrap tab which is not the tab initially open when the page is loaded then the map is not initialised correctly and does not display.

Solution:
Add the following custom CSS on the relevant page:

.tab-content > .tab-pane { display: block; height:0; overflow:hidden; } .tab-content > .tab-pane.active { display: block; height:auto; }

Relevant documentation:
https://toolset.com/documentation/user-guides/adding-custom-css-views/

This support ticket is created 7 years ago. 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
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+01:00)

Tagged: Toolset Maps, Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by diyanK 7 years ago.

Assisted by: Nigel.

Author

Posts

April 4, 2017 at 8:49 am #509243

diyanK

Hi,

I know this has been discussed in this topic:
https://toolset.com/forums/topic/map-view-in-a-template-within-a-tabbed-content-box-does-not-work-properly/#post-509214

But the solution given there does not seem to work for me.

I have a tabbed interface that has a google map embedded in the 4th tab.

The map fails to load properly when in the tabbed interface, but works like a charm when I put it in a dedicated page.

Can you help me solve this?

Thanks!

April 4, 2017 at 12:02 pm #509316

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

You can fix this with a little CSS.

This needs to overwrite the Bootstrap style rules, so your CSS will either have to be added after the Bootstrap stylesheet or you will need to include !important on the rules.

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .tab-pane.active {
    display: block;
    height:auto;
}

April 4, 2017 at 12:22 pm #509324

diyanK

Oh sweet!

This seems to have fixed it!

I have added it at the end of my child theme stylesheet as is and it worked.

Thanks a billion 🙂

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.