CODEWITHSUNDEEP
cssiframe
Millhorn
Millhorn

Reputation: 3166

Remove scrollbars (x and y) from iframe

I have a jsFiddle here...

I'm trying to display the site inside the iframe, but without the scrollbars. I've tried overflow: hidden; on the iframe, both in the head style and in-line. It's not working.

.iphone5 {
    background-image: url("images/iphone5-upright.png");
    background-repeat: no-repeat;
    height: 631px;
    width: 300px;
    margin: 20px auto 30px;
    position: relative;
}
iframe { overflow: hidden; }

I'm also trying to maintain the ability to scroll...

Where am I going wrong?

Edit: If not removing the sidebar, why not hide it? Is there a way to do that with margins and padding?

Upvotes: 0

Views: 479

Answers (2)

Dalex
Dalex

Reputation: 3061

Try adding scrolling="no" as an attribute to the iframe tag.

Seems to work in Chrome. Example fiddle: http://jsfiddle.net/ELf3b/2/

Just style your iframe dimensions and scrollbars accordingly. You might also try a css rule like:

iframe[scrolling='no'] { overflow: hidden; }

To maintain the vertical scrolling, try nesting the iframe in another element as suggested by Prasanth K C.

Upvotes: 0

Prasanth K C
Prasanth K C

Reputation: 7332

You can do some trick like this. So that you can hide the scrollbar from users.

Wrap your iframe with a span element and apply below CSS.

HTML:

<div class="iphone5">
    <span class="frameBox">
    <iframe  style="float: left; width: 277px; height: 445px; margin: 93px 0 0 26px; src="" id="iframe"></iframe>
</span>
</div>

CSS

.frameBox {
   width:275px;
   height:520px;
   overflow:hidden;
   display:block;
}

DEMO FIDDLE

Upvotes: 1

Related Questions