CODEWITHSUNDEEP
htmlcssiframeinternet-explorer-8
Crista23
Crista23

Reputation: 3243

Div inside iframe not entirely visible because of iframe margins

I have a div inside an iframe. My problem is that when the div opens, its content is not displayed entirely because of the width limitations of the iframe. I tried playing with the z-index and did set a higher z-index value for the div inside iframe, with no success. Any advice much appreciated. Thanks!

Upvotes: 1

Views: 711

Answers (4)

feeela
feeela

Reputation: 29932

You can't overflow contents out of the boundary of an iframe. Thus the overflow and z-index properties can't be used to let some element flow out an iframe.

You need to either increase the width of the frame or not use an iframe at all; for example loading the contents via AJAX and inserting them into another element of your document.

Upvotes: 1

davids
davids

Reputation: 6371

You could auto-resize the iframe when the contents are loaded:

<script type="text/javascript">
  function autoResize(id){
    var height = document.getElementById(id).contentWindow.document.body.scrollHeight;
    var width = document.getElementById(id).contentWindow.document.body.scrollWidth;

    document.getElementById(id).height= (height) + "px";
    document.getElementById(id).width= (width) + "px";
  }
</script>

<iframe src="yourpage.html" id="yourframe" onLoad="autoResize('yourframe');"></iframe>

Upvotes: 1

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

This could be because of frame body margin use margin:0 in iframe

html,body {margin:0px; padding:0px}   //use this in  iframe css

Upvotes: 0

renathy
renathy

Reputation: 5355

Have you tried to use absolute position of div? Something like:

.div-overlay {
    position:absolute;
    top:200px;
    left:100px;
 }

Upvotes: 0

Related Questions