IE vertical scroll bar when using a full DOCTYPE

Posted in xn--kfs74mzzid01b.com edit by webmaster on January 7th, 2009

I know this is an IE 6 thing, but is it possible for BorderLayout to hide the vertical scrollbar IE 6 automatically adds when using a full doctype?

Here's a link to show you what I'm referring to.
http://saratogahomeowners.com/Ext-Samples/test-with-doctype.html

You'll have to be using IE 6 to see this. It works fine in FF and I'm not sure about IE 7.

Here's my two fixes.

Fix 1 - add a css rule of html {overflow-y: hidden}
http://saratogahomeowners.com/Ext-Samples/test-with-doctype-fix1.html

Fix 2 - remove the url from the doctype
http://saratogahomeowners.com/Ext-Samples/test-with-doctype-fix2.html

I like Fix 1 since there are some doctypes that I don't have control over and thus can't modify. Also, if you remove the url, doesn't the rendering revert to quirks mode???

What I don't like about Fix 1 is that there will be cases where I'm not using a BorderLayout in document.body and thus I would loose the vertical scrollbar if I add this rule globally. So my question is this: Can Ext handle this for us? And dynamically set the overflow-y to hidden if you are using IE and you have a BorderLayout defined for document.body?

In LayoutManager.js I see this snippet of code:

// ie scrollbar fix
if(this.el.dom == document.body && Ext.isIE){
document.body.scroll = "no";

Is there a way to also set the overflowY on the element? Would document.documentElement.style.overflowY = "hidden" do it?

OK. I'll defer to your knowledge on the subject which far out weighs mine. :)

I'll just make sure to document for my development team to add that extra piece of css for any pages that use a full doctype AND they are creating a borderlayout in document.body.

This also might be a good thing to add in the FAQs, don't you think? I know I spent a good little while tracking down why some of our pages that used the same borderlayout code worked and others didn't.

We will add it to the BorderLayout tutorial which is around the corner.

So your suggestion is to include those css rules in a stylesheet? Wouldn't it be better to set these via the code in LayoutManager? This way developers don't have to worry what "extra" css they need to set for the Ext components. I would think that we would want all Ext components to work "out of the box", regardless of what doctype and/or browser is used without any extra tweaks by the developers.

Plus, I can't add these rules to a global stylesheet we have for our apps since not every page will need a BorderLayout and not all will need it in document.body.

What do you think?

I just tested in Ext 1.0 and the same thing is happening. I also tested adding the document.documentElement.style.overflow = "hidden" line to LayoutManager

// ie scrollbar fix
if(this.el.dom == document.body && Ext.isIE){
document.body.scroll = "no";
document.documentElement.style.overflow = "hidden"
}

So, now I have fix3 that uses the above modification to Ext.LayoutManager.

To see this fix click here (http://saratogahomeowners.com/Ext-Samples/test-with-doctype-fix3.html)

Actually there's more required than that and depending on the browser the target can either be the body or the HTML element. I use this CSS:

html, body {
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}

I suppose we could but I think this is something that really belongs in CSS. For example, what if a user really does want a border or margin and we have that hard-coded in the JS?

#If you have any other info about this subject , Please add it free.#

IE vertical scroll bar when using a full DOCTYPE

Archives

Meta