how to increase iframe height when tab selected containts long content

319
May 10, 2017, at 12:43 PM

I have included iframe to other web page as below

<script type="text/javascript">window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventName=e.data[0]; var data=e.data[1];switch(eventName){case "setHeight": $iframe.height=parseInt(data); break; case "scrollToTop": $iframe.scrollIntoView(); break;}}, false);
</script>
<div style="width:100%; text-align:left;" >
<iframe src="http://mywebpage.com/list?mode=iframe" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="no" allowtransparency="true" id="my-iframe"></iframe>
</div>

I have three tabs in iframe page, first tab contains data which don't have long content but third tab having long content. When i open third tab, iframe height doesn't get increased. Iframe height remains same when loaded for first time and remaining page's content gets hidden. How can i fix this ? I have used TBHTML tabs for tab rendering as below.

echo TbHtml::tabbableTabs($tabs);
Answer 1

you can use iframe-resizer jquery plugin to overcome this issue

http://davidjbradshaw.github.io/iframe-resizer/

example

http://davidjbradshaw.com/iframe-resizer/example/

Answer 2

For this you can use following code

document.getElementById("my-iframe").height = (document.getElementById('my-iframe').contentWindow.document.body.scrollHeight) + 'px';
Rent Charter Buses Company
READ ALSO
Why jQuery returns object without context and selector

Why jQuery returns object without context and selector

I'm trying to develop a chrome extension, in content script, I have below code:

288
Uncaught TypeError: Cannot set property &#39;1&#39; of undefined ajax get request

Uncaught TypeError: Cannot set property '1' of undefined ajax get request

I'm keep getting uncaught TypeError: Cannot set property '1' of undefined for the following line:

287
js an css not works altought break point is set

js an css not works altought break point is set

My breakpoint is 1000px and having a class in <header>But my document is neither following any one of the condition

321
Conditional checking of &ldquo;datatable checkboxes&rdquo; in jQuery

Conditional checking of “datatable checkboxes” in jQuery

Hi I'm trying to create a table that consists of checkboxesAnd each row has its own class and ID

335