?
Solved

iframe scrollbars - vertical only?

Posted on 2007-07-31
7
Medium Priority
?
2,841 Views
Last Modified: 2012-05-05
Hi,
Just a simple question on iframes...
I'm currently testing with ie6 and when the content extends below the bottom of the iframe, I get both vertical and horizontal scrollbars.
Is there any way to make it just show the vertical scrollbar?
I've tried scrolling="vertical" and it does the same thing as no setting (auto).
0
Comment
Question by:azaram
  • 3
  • 2
  • 2
7 Comments
 
LVL 17

Accepted Solution

by:
BogoJoker earned 2000 total points
ID: 19606041
I would love to not just post a link, however this source seems to have covered all of the bases:
http://www.noscope.com/journal/2004/02/ie-horizontal-scrollbar-bug

Make sure that you read that article, because everything is explained as well as the Pros and Cons of the 3 most common solutions.

But in case that source goes down here is the gist of it:
Add this CSS property sto the element:
overflow-x: hidden;
overflow-y: auto;

This will get rid of the horizontal scroll bar and making the verticle scrollbar only available when needed.  The only issue being that if your content really did need a scroll bar it won't show up!  This does however solve the unusual issue with IE that has both scrollbars show up when only the verticle scrollbar is needed.

- Joe P
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19606043
You're likely getting the horizontal scrollbar because there is content in your iFrame that doesn't fit within the dimensions of your iFrame.  If you can ensure that the width is less than that of your iFrame the horizontal bar will disapear.  Post code and I'll lookat it if you'd like, tables can expand and cause unpredictable widths.
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 19606052
Joe has provided a much more excellent solution above, but keep in mind that any content that is hidden and would require scrolling horizontally will be unreachable and could look weird and cut-off.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 17

Expert Comment

by:BogoJoker
ID: 19606071
Jessegivy is correct and I fully remember typing that but I must have erased that when I edited my comment.  Thanks jessegivy!
0
 

Author Comment

by:azaram
ID: 19606074
jessegivy, the content was definitely not extending too far horizontally. Like Bogo said, it's a bug in IE6 that puts up both scrollbars, not just the one that is required.
0
 

Author Comment

by:azaram
ID: 19606081
Bogo... yeah I think I saw that originally too.

Anyway, thanks, you nailed it.. added the style section below into the head of the iframe source page and it solved it.
Note that adding those style tags to the style of the iframe itself didn't work.
Thanks!!!

<style>
html {
      overflow-x: hidden;
      overflow-y: auto;
}
</style>
0
 
LVL 17

Expert Comment

by:BogoJoker
ID: 19606093
That is surprising to me that you did have to add it using html { }.

However adding to html { } should be fine considering horizontal scrolling is considered very bad practice, it ranks number 3 on this list of top 10 bad web design things:
http://www.fenclwebdesign.com/bad-design.htm

And in your case above this wasn't your fault, just IE getting a little too happy with scrollbars.

Thanks for the grade,
- Joe P
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question