PDA

View Full Version : Auto Scrollbars in IE



af040
1 Feb 2007, 7:23 AM
It seems that containers are not displaying scrollbars properly in IE. I noticed this first in my own coding, but see a similar problem in one of the online examples.

In my own BasicDialog with autotabs, the window can be shrunk vertically making long content disappear, but no scrollbar appears. With my mousewheel, however, I can move the content within the tab around -- so the scrollbar works but is just not visible. The problem occurs in IE6 and IE7, but not in FireFox. I am using YUI-ext 0.33.

Testing the BasicDialogs in the documentation center, I experience a similar issue. The layout dialog example will show a horizontal scrollbar when the splitter shrinks the East panel enough when using FireFox, but will not show a scrollbar when using IE.

Perhaps the issue for my code is the table I am displaying within the tab, and for the BasicDialog example perhaps it is the button shown. I will keep looking into this, unless someone else has a ready answer that perhaps I have missed.

salix
20 Apr 2007, 5:20 AM
I have the same problem in Final Ext 1.0.
I have code that centers borderlayout and for center part there is autoScroll:true.
scollbar appears on FF2.0, but not in IE (however, I can scroll center region with mouse wheel)

jarrednicholls
20 Apr 2007, 6:26 AM
I can't replicate this in Ext 1.0 final. I have a BasicDialog with a div in the middle with some content. The BasicDialog is set to resizable:true and I don't even have autoScroll as true, and scrollbars appear fine in IE7. Can either of you post code so someone can replicate and debug? Thanks.

copongcopong
23 Apr 2007, 2:44 AM
any possibility that this issue is related to this:

http://extjs.com/forum/showthread.php?t=5163

you may try the same fix; hope it works.

stephenk
1 May 2007, 2:12 PM
I was having this exact problem where the dialog was not showing the scrollbar in IE 6 but everything worked in Firefox.

By using the following document type on my main page, everything worked in IE 6:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/TR/html4/loose.dtd">

In doing a bit of research, the fact that the URI is included in the doctype declaration means that IE is not running in "quirks" mode. See http://htmlhelp.com/tools/validator/doctype.html for some simple details.

ssapq
21 May 2007, 10:03 AM
if you want to put IE6 in quirksmode, but not other browsers, put an html comment above the doctype declaration.



<!-- this puts ie6 in quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ssapq
21 May 2007, 3:00 PM
In my own BasicDialog with autotabs, the window can be shrunk vertically making long content disappear, but no scrollbar appears. With my mousewheel, however, I can move the content within the tab around -- so the scrollbar works but is just not visible. The problem occurs in IE6 and IE7, but not in FireFox. I am using YUI-ext 0.33.



I've solved this in our app by placing

width: 99.9%; on the element which has
autoScroll: true. I applied the rule to IE only.

So far, works perfectly.

jack.slocum
21 May 2007, 7:16 PM
Add fitToFrame:true, autoScroll:true to the panel instead of the center region and your problem will go away.

diehard
22 May 2007, 3:23 AM
I'm having a scroll bar issue with IE6 (no problem with Firefox). I'm using YUI 2.2.2 and ExtJS 1.0.1a. I made a basic layout using only north, east, south, west, and center. I made sure east and west have fitToFrame:true and autoScroll:true. I populate the east, west, and center panels with a lot of text until it overflow and theoretical the scroll bar should appear.

I tried the css way from ssapq's post. I used ".x-layout-panel-west .x-layout-panel-body" to set the width. I find IE6 spits out the vertical scroll bar, but the visual interface doesn't look right. The east and west panels have horizontal scroll bar even with when the texts doesn't overflow.

After some frustrations and I changed the order of javascript code around, I found it to work. Before, I had "autoScroll:true" and "fitToFrame:true" at difference places. Thus, I moved "autoScroll:true, fitToFrame:true" from "layout.add(...)" to "layout = new Ext.BorderLayout(document.getElementById('frame'), { west: {...}". But, I made SOME progress and finally able to see the scroll bar appearing for IE6. But, my test was with static text.

The major issue is working with Asp.Net and using Asp.Net Ajax UpdatePanel control. When I use the ajax updatepanel to populate the side panel with a lot of text the scroll bar does not appear at all.

I'm pretty much stomped for the past 2 days trying to solve this puzzle.

amackay11
11 Jun 2007, 8:21 AM
Diehard,

I had your same problem and followed your suggestion:

Fails:



fitToFrame:true,
autoScroll:true
...
innerLayoutwest.add('north', new Ext.ContentPanel('station-panel', {title: "Stations" }));

Works (thanks!):



fitToFrame:true,
autoScroll:true
......
innerLayoutwest.add('north', new Ext.ContentPanel('station-panel', {title: "Stations", fitToFrame:true, autoScroll:true }));

This seems to work for me, with a dynamic grid as the contents of the layout. Perhaps a bug? I have ASP.NET 2.0 page but am not using update panel (which I really don't like).

mattsmith321
23 Jun 2007, 12:24 AM
Add fitToFrame:true, autoScroll:true to the panel instead of the center region and your problem will go away.

Thanks Jack! This one has been driving a number of people on our team bonkers for the past couple of months.