2nd and other tabs do not show content in full width

Hello! I have 3rd party calendar plugin, which shows agenda calendar and I have tabs element in the cornerstone. In the first tab, the calendar plugin shows well, but on the 2nd and other tabs it seems like it renders only in left site of page, and doesn’t go all full width. What could be the cause? The site is - kalen.lv

Thank you!

Hello Robert,

Did you use the similar shortcode in the tab contents? Please be advice that the calendar plugin needs to initialize as soon as the page is loaded. The calendar contents for the 2nd and 3rd tab contents cannot initialize because it is hidden. This maybe the cause why they are different. Please try to create a test page and insert the 3 shortcodes in one columns so that we can compare.

Best Regards.

Here is the tab test page, where all three tabs have the same content:

https://kalen.lv/tab-test-page/

Hell Robert,

I have just checked the page and the second tab seems to be displaying fine:

It is filling the entire width as what you can see in the hover state of the item above.

Have you tried checking and trying to clear your browser cache and see if it changes anything?

Thank you.

That’s weird :thinking: ! I have tried on different PC’s, laptops, browsers and clearing the cache, it shows on 2nd on other tabs like this:

Hello Robert,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Cheers.

Hi Robert,

The reason for that is due to the event calendar plugin itself. Your plugin set specific size of the content depending on the size of its container. And since second, third, and other inactive tabs are hidden by default, then container’s dimension is zero. And thus your plugin serves the smallest sizing, please check this comparison

The imported CSS is for medium and small (second/third tab).

No CSS is imported for active tab content(standard CSS)

And here is the video recording of how your plugin scripts works https://www.dropbox.com/s/3bkmfd38ft6vab9/bandicam%202020-02-02%2003-12-33-760.mp4?dl=0. For every window resize, it recomputes the new size of the content, and then all other inactive tabs (even the first tab) became small again. You can confirm this by adding another content not related to event calendar plugin, like standard content, images, and so on, and their sizes aren’t changing compared to the content added by event plugin. For that, I recommend contacting the event plugin developer to see what fix they could add.

Thanks!

Ok, thank you!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.