Skip Navigation

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

This support ticket is created 5 years, 1 month 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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 5 years, 1 month 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.