How to make iFrame not have a scrollbar

Question

I am working on creating a widget like this:

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

And for some reason, I can't get the scroll bar to leave. Does anyone know how to do this?

Thanks!

Answer 1

Like this:

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

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

Answer 2

 iframe { overflow: hidden; } 

must do it. However, do you really want to do this? Any content that cannot be immediately viewed will be inaccessible (without jumping through hoops to scroll from the keyboard).

Answer 3

The CSS property that deals with a document larger than the viewport is overflow .

This is commonly used to create a scrollable div , as shown in this example .

The value you are looking for is: hidden , which will freeze the area outside the visible range. Something like:

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

The widget should look good

So, for CSS properties, you can:

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

And for iframe properties that you probably want:

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

Read on to understand what they are doing, but they are common to widgets , like what you describe in your question. Together they must create a beautiful widget.

Answer 4

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

Note. This will not work in HTML5.

Answer 5

Although

overflow:hidden;

can work with Firefox, it does not work with IE or Chrome. If you are NOT using HTML5, you can use scrollable=no .