CODEWITHSUNDEEP
htmliframe
silent-coder
silent-coder

Reputation: 11

Displaying a div in an iframe out of it

I am having a div in an iframe which appears when we click in an input box.

iframe looks like this

<iframe src='mycontrol.html' width='300' height='50' />

Below is code for mycontrol.html

<div>
    <input type='text' />
    <div style='height:80px;'>
         This will be shown when we click in the above text box.
    </div>
</div>

I have the javascript to show the div when user clicks the input box, problem is that since this div is more in height than the height of iframe and is not displayed completely. Some area from the bottom of div was cut due to iframe.

My question, is there anyway to show complete div with javascript or css without resizing the iframe ??

Upvotes: 1

Views: 2398

Answers (2)

Teemu
Teemu

Reputation: 23396

Maybe this is what you need? It doesn't exactly get the div break out of the iframe but it looks like it would. Working demo at jsFiddle.net

In the main page:

#wrapper {
    position: relative;
    z-index: 1000;
}
#frame {
    width: 300px;
    height: 120px;
    margin-bottom: -70px;
}

and HTML:

<div id="wrapper">
    <iframe id="frame" src="frame.htm" frameborder="0"></iframe>
</div>
<p>Some text below IFRAME in main window.</p>

In mycontrol.html:

BODY {
    overflow: hidden;
}
#div {
    width:100px;
    height: 80px;
    background: #ff0;
    border: 1px solid #000;
    display: none;
}

And HTML:

<input type="text" onfocus="document.getElementById('div').style.display='block';" onblur="document.getElementById('div').style.display='none'";/>
<div id="div"></div>

Upvotes: 1

mr. Holiday
mr. Holiday

Reputation: 1800

I think you can use css overflow:scroll for your iframe

iframe {
 overflow:scroll;
}

Upvotes: 0

Related Questions