iframe inside div cut off content

Question

i have an iframe inside a div. the thing is, the iframe have an expanding menu (expands vertically) inside it. so, the height of the iframe will be dynamic, depending on what item is expanded. when i expand it, it will cut off and not show. below is the code for the div and the iframe.

 <div class="camera">
<iframe name="ifra" id="ifra"  title ="iframe" src="pages/whitef.html" frameBorder=0 scrolling="no"></iframe>
</div>

this is the css for both item.

iframe#ifra{
position: relative;
width: 810px;
min-height: 750px;
height:100%;
margin-top: -40px;
z-index: 1;
border:none;
overflow:hidden;
}
.camera {
height: 100%;
}

what i want to achieve is that the iframe will expand according to the expanded menu and also not being cut off.

here http://jsfiddle.net/T3yJU/ . i want to make it so that when user expands the menu, the iframe and div expands with it. — Shazery Nasir, Mar 25 '13 at 05:14
Instead of iframe have you tried JQuery load() method or post method. That might help you. — Prashant Shilimkar, Mar 25 '13 at 05:09
http://jsfiddle.net/mHs45/ - I just added width: 100% to the iframe. — Jack, Jan 28 '14 at 18:15

MarmiK · Answer 1 · 2013-03-25T08:02:50.170

0

Answer is in your CSS,

you may write this

overflow-y:scroll; //that will create a scroll in the iframe the content will not be hidden,

while you write OVERFLOW: HIDDEN; it will take the contenr increase in overflow and will cut down, will not shown.

Edit : for new link

Refer Old conversation for the same

http://stackoverflow.com/questions/934323/control-iframe-height-with-jquery

that will do :)

edited Mar 25 '13 at 08:02

answered Mar 25 '13 at 05:26

MarmiK

5,639
6
40
49

1

i do not want scrollbars in it. thats why i hidden the overflow. – Shazery Nasir Mar 25 '13 at 05:27
then please verify the height approximation and use the `height:???px` as `height:100%` will not help here. thank you, – MarmiK Mar 25 '13 at 06:40
i want the i frame to follow the size since i have expanding menu inside of the iframe. so, setting the max height is okay, but it will leave a lot of space if the menu is collapsed. – Shazery Nasir Mar 25 '13 at 06:49
@ShazeryNasir I think this will help, refer the link of old conversation, `http://stackoverflow.com/questions/934323/control-iframe-height-with-jquery` here see the second answer with function by "Jose Basilio". I hope that will do. :) – MarmiK Mar 25 '13 at 08:01

btevfik · Answer 2 · 2013-03-25T06:04:41.947

0

ok this plug-in is out there to do what you requested, but it works only if the iframe src is in your domain.

there is also an article on css tricks you might want to look at.

edited Mar 25 '13 at 06:04

answered Mar 25 '13 at 05:54

btevfik

3,391
3
27
39

@ShazeryNasir there is not much else i could find about this. it is not a trivial thing to solve. – btevfik Mar 25 '13 at 06:11
@ShazeryNasir also have a look at this https://github.com/premasagar/appleofmyiframe – btevfik Mar 25 '13 at 06:15

iframe inside div cut off content

2 Answers2

Linked