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

[Autor]

Mensajes

[Gavin]

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.

[Nigel]

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?

[Gavin]

The page is...

enlace oculto

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.

[Nigel]

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?

[Gavin]

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