CODEWITHSUNDEEP
htmlcssiframe
Genadinik
Genadinik

Reputation: 18629

How to make iFrame not have the scrolling bar

I am working on making a widget like this one here:

http://www.comehike.com/outdoors/widget.php?hike_id=176&height=400&width=700

And for some reason I can't seem to make scrolling bar go away. Does anyone know how to do that?

Thanks!

Upvotes: 15

Views: 47921

Answers (5)

KalamariKing
KalamariKing

Reputation: 131

Although

overflow:hidden;

may work with Firefox, it doesn't work with IE or Chrome. If you are NOT using HTML5, then you can use scrollable=no.

Upvotes: 1

The_HTML_Man
The_HTML_Man

Reputation: 347

Just add the scrolling="no" attribute to your iframe.

Note: this will not work in HTML5.

Upvotes: 2

Vasiliy Sharapov
Vasiliy Sharapov

Reputation: 1057

The CSS property that deals with the document being larger than the viewable area is overflow.

This is commonly used to make scrollable divs as seen in this example.

The value you're looking for is: hidden which will clip the area outside of the visible range. Something like:

<iframe style="overflow:hidden;" src="URL" />

Should look nice a a widget

So for CSS properties you might want:

overflow:hidden;
border:none;
width:100px;
height:25px;"

And for iframe properties you probably want:

scrolling="no"
frameborder="0"
allowTransparency="true"

Read up on these to understand what they do, but they are the ones common to widgets like what you describe in your question. Together they should produce a good looking widget.

Upvotes: 5

aorcsik
aorcsik

Reputation: 15552

Like this:

<iframe ... scrolling="no"></iframe>

Edit: Also frameborder="0" is handy to hide the border.

Upvotes: 25

Bobby Jack
Bobby Jack

Reputation: 16018

iframe { overflow: hidden; }

ought to do it. However, do you really want to do that? Any content that is not immediately viewable will then not be available (without the user jumping through hoops to scroll it via the keyboard).

Upvotes: 3

Related Questions