Iframe in second tab not displaying correctly

[katie_s_mills]

Hi there,

I’ve read through this thread about using iframe content in Cornerstone tabs: https://theme.co/apex/forum/t/using-tabs/49901/3

Specifically the comment “I tested a simple iframe code inside both Tab elements ( Classic and V2 ) and it works fine in both tabs.”

I’m having issues with iframe displaying correctly, not on the tab that is open on page load, but on the second tab. The lower half of the iframe content is blank. The behavior is the same in classic and V2 tab element.

Confirming that iframes should work correctly in tabbed content?

Sending you links and logins in separate comment.

[friech]

Hi @katie_s_mills,

Thank you for writing in, but I don’t see the issue, I don’t see either the 18KM and 35KM content getting cut off.

Please clarify how we can replicate the issue.

Cheers!

[katie_s_mills]

I see your screenshots thank you for sharing. Perhaps I will clear browser cache and that will help the cut-off issue.

However there is still an issue, on the 35KM tab, the map is super zoomed out. However, if you paste that same iframe into the 18KM tab, or a new text element, it displays the same zoom as the 18km iframe. I can see this in your screenshots as well.

Thanks in advance for your support.

[paul.r]

Hi @katie_s_mills,

Can you try adding height and width using an inline style to your iframe.

For example.

<iframe style="width:100%;height:600px;" src="https://www.hellodrifter.com/events/survival-of-the-fittest-35k-2019/races/1215/map_with_chart?line_color=654E94&amp;skin=outdoors"></iframe>

Hope that helps

[katie_s_mills]

Hi there,

I just did as you suggested. Oddly enough, that loaded the iframe fine in Cornerstone preview. But after saving the same behavior happened. Please see here for screen recording: http://somup.com/cqhDoRng2o

[rad]

Hi Katie,

Please add this CSS as well

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

That part requires dimension that’s why it’s not properly working on initially hidden container, like the tab, accordions, and similar.

Thanks!

[katie_s_mills]

That worked thank you so much!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.