Unable to Hide Vertical Scroll Bar on Web Page

Question

I am displaying an HTML page within another HTML page depending on which link is selected using the following function:

function loadProject(sel) {
    var url = sel[sel.selectedIndex].value;

    if(url) {
        document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
    } else {
        document.getElementById('projectContainer').innerHTML = "Please select a project.";
    }
}

And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn't be - even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:

object {
    width: 100%; 
    border: none;
    overflow: hidden;
}

but that is not accomplishing what I'm looking for. Any suggestions? Thanks.

What browser are we talking about? And where exactly is the scroll bar? Isn't there an iframe involved when you talk about a "page inside a page"? — Pekka, Dec 21 '09 at 20:35
@Pekka - I'm going for a cross-browser approach if possible (testing in Chrome and IE). As for the IFrame, it is not needed when doing it using this method. — JasCav, Dec 21 '09 at 20:38

score 1 · Accepted Answer · answered Dec 21 '09 at 20:41

1

Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.

You need to declare overflow: hidden for the body inside the document you are embedding.

answered Dec 21 '09 at 20:41

Pekka

442,112
142
972
1,088

score 0 · Answer 2 · answered Dec 21 '09 at 20:39

0

overflow: hidden won't work for content inside an iframe/frame/object. You are going to need to edit the CSS of the pages being rendered in the object tag. Also, I recommend you DO NOT do this, as you don't know if I have my browser set by default to have forced huge text due to bad sight or something similar, which would make the scrollbar unusable/hidden to me, hindering usability. Just don't do what you are trying to do.

answered Dec 21 '09 at 20:39

Eli Grey

35,104
14
75
93

That's a bit harsh. We don't know that this page will even be publicly viewable. – Matt Ball Dec 23 '09 at 15:17

score 0 · Answer 3 · answered Jul 08 '11 at 16:28

0

make it overflow: auto; it works!

answered Jul 08 '11 at 16:28

Tejas C

383
2
7

Unable to Hide Vertical Scroll Bar on Web Page

3 Answers3

Linked