

Here you don't see the iframe because it has a height of 0. This is a tab with the same iframe as in tab 2 from the same domain without the height workaround. The id of tab 1 is "tablist1-panel1", of tab2 is "tablist1-panel2" and of tab3 is "tablist1-panel3". The tab 2 does use the height workaround while tab 3 does not. This example shows 3 tabs where tab 2 and 3 have iframes from the same domain which are hidden by default. Example 17: Simple hidden iframe auto height example Please see the examples below and also read the documentation in the settings of advanced iframe pro.

To enable the solution you need to specify the hidden elements and depending on the template also a visible element with the same size as the hidden one.

The plugins I use are "Tabby Responsive Tabs" and for the nested tabs "Post UI Tabs" When the other tab is clicked the currently shown is hidden and the clicked one is shown. Most of the existing implementations do show the first tab and hide all the others. The best example for this is when you use a tab plugin. Chrome does measure hidden elements but completely wrong as well. So if you want to resize an iframe to his content height and the content is measured the default way it would not work if the iframe is now shown. The reason why this feature exist is that elements which are hidden with the css style "display:none" do return 0 as height when measured with Javascript on almost any browser. You are on HTTPS right now Please click here to get to the HTTP version.
