SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Location
    California, USA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Vertical Scroll Bar Not Displayed in Chrome nor Opera

    Hello there.

    I am attempting to display only a vertical scroll bar within an iframe. However, I haven't achieved the desired effect in any browser but Mozilla Firefox.
    I've tried out several CSS tricks, but to no avail.

    Here is an image explaining what I mean.
    On the left you have Google Chrome, and on the right you have Mozilla Firefox.

    As you can see, Mozilla Firefox contains a vertical scroll bar at all times, regardless of overflow, yet Google Chrome does not.
    How could I achieve this effect in Chrome and Opera?

    Code:
    iframe {
    	
    	padding:0px;
    	margin:0px;
    	overflow-x:hidden;
    	overflow-y:scroll;
    	width:262px;
    	height:332px;
    	border:none;
    }
    Thank you in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I don't think there's anything you can do about it as other browsers seem to treat "scroll" as "auto" where iframes are concerned.

    I suppose you could add a div around the iframe and set the iframe to a height greater than needed but will result in unwanted scroll space.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    iframe {
    	border:0 none;
    	padding:0;
    }
    html, body {
    	margin:0;
    	padding:0
    }
    div {
    	overflow-x:hidden;
    	overflow-y:scroll;
    	width:262px;
    	height:332px;
    	border:none;
    }
    iframe {
    	padding:0px;
    	margin:0px;
    	border:none;
    	height:999em;/* larger than ever needed*/
    }
    </style>
    </head>
    <body>
    <div>
    		<iframe scrolling="no" src="iframesrc.htm" ></iframe>
    </div>
    </body>
    </html>
    I don't think that's a very good solution though.

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Location
    California, USA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again.

    Although it isn't quite what I was looking for, I suppose I could give it a go.
    I'd still like to find a full-proof solution though.

    Thank you for your reply.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •