CODEWITHSUNDEEP
asp.netcss
NoviceMe
NoviceMe

Reputation: 3256

How to remove vertical scrollbar from iframe inside the page

I have following webpage:

<div id = "wrapper">
    <div id="leftmenu>
    ...
    </div>
    <div id="search">
    ...
    </div>
    <div class="Container">
            <div id="content">
                <iframe id="iF" name="if" src=""></iframe>
            </div>
        </div>
</div>

It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.

if i set like this in css:

.Container
{
    position:absolute;
    width:100%;    
    height:100%;
    left:180px;
}

It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.

Upvotes: 2

Views: 3789

Answers (3)

Bear In Hat
Bear In Hat

Reputation: 1886

There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.

The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.

That being said, if the page you are displaying may change in size, your maintenance makes this pointless.

Charlie Frank's answer is good for same domain applications.

Upvotes: 0

shaunsantacruz
shaunsantacruz

Reputation: 8930

Try: overflow: hidden; on your iframe.

#content iframe {
    overflow: hidden;
}

Upvotes: 1

Charlie Frank
Charlie Frank

Reputation: 76

Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.

<div id = "wrapper">
    <div id="leftmenu>
    </div>
    <div id="search" >
    </div>
    <div class="Container">
            <div id="content">
    <iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
            </div>
        </div>
</div>
    <script>
function resize(elem){
    var outer=elem;
    var inner=elem.contentDocument.documentElement;    
    outer.style.border="0";
    outer.style.overflow="hidden";
    outer.style.height=Number(inner.scrollHeight+10)+"px";
    outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>

Upvotes: 0

Related Questions