Skip Navigation

[Resolved] Bootstrap View not displaying correctly in Bootstrap 4 tab (intermittent)

This support ticket is created 4 years, 5 months 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+00:00)

Tagged: 

This topic contains 4 replies, has 2 voices.

Last updated by Gavin 4 years, 5 months ago.

Assisted by: Nigel.

Author
Posts
#1356887
galllery-broken.png
photo-gallery-working.png

I had a page which displayed various content including views. The page worked fine and all content displayed correctly. I split the page into four Bootstrap 4 tabs and now one of the views in one of the tabs displays correctly some of the time and not others! I cannot replicate the problem exactly. Sometimes the problem occurs on page refresh, other times it occurs when I switch tabs.

However, whenever the problem occurs, if I resize the whole page - even slightly - the view is instantly displayed correctly.

I have a similar problem in one of the other tabs in that a Social Media plugin does not display correctly but then does if I do a page resize.

I would prefer it if Nigel could help as he is familiar with the site having previously helped me.

#1357619

Nigel
Supporter

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

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

Hi Gavin

I don't still have access to your site and it's behind a maintenance page.

Can I get credentials and a link to the page in question?

#1357689

The page is...

hidden link

This has four tabs and it's the Gallery Tab that has the intermittent issue. I do have some javascript running to append URLS to Bootstrap tabs. I have tried removing this and it made no difference. I also edited the view to not update URLs too. Again, no difference.

#1357885

Nigel
Supporter

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

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

Hi Gavin

I think the issue is that when you use Bootstrap tabs the inactive tabs on page load have display:none, and because of that the gallery fails to initialise correctly, which you notice when you switch over to the gallery tab.

It's a similar problem to Google maps on secondary tabs not initialising correctly.

You can tweak the CSS so that, instead of display: none the inactive tabs have a height of zero, which fixes the initialisation problem.

You can see I added a little inline CSS to your page. It looks like the gallery then works as intended.

Can you check?

#1357947

A great solution - brilliantly found and explained. Thank you. Top support as always.

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