ComboBox scroll issue in Firefox

[tbarstow]

Hi,

The ComboBox's scrollbar seems to get messed up in Firefox on the Mac (this is NOT a problem on the PC). I am going to guess that this is particular to my situation, as I can't find any other posts about this - either that or I am the only Mac Firefox user out there!

I am simply rendering the ComboBox dynamically (i.e., it is autoCreating the HTML) into a Toolbar, which is added to the header panel of a grid.

The issue is that the scrollbar is more or less invisible in Firefox, unless I click in the area where the scroll bar should be, in which case it becomes visible - but as soon as I mouseout or click again, it disappears again. Using the scroll wheel, incidentally, scrolls the content and shows the scrollbar (again, until I mouseover/mouseout or click, in which case it again disappears).

Thanks for any help!
Taylor

[schmidetzki]

I probalby have the same problem (FF/Mac).
The scrollbar is cut off when the combobox is shown inside a dialog
See attached screenshot.

[tbarstow]

Yes, that's very similar to what I'm seeing. Sorry I forgot a screenshot, attaching one now

[blakgeek]

Did anyone find a solution to this problem? I'm experiencing something similar except the scrollbar disappears completely when you move the mouse over it.

[spotk]

yep, still same thing with latest release here.

cheers

spotk

[jack.slocum]

FF/Mac scrollbars are like one giant bug. There is no known workaround yet.

[kimu]

I have the same problem. Scrollbars are not visible if the grid is rendered inside a panel.
I have a basic dialog with a grid inside with scrollbar invisible (as in fig. 1).
A possible workaround I've found is to set autoScroll to false in the basic dialog config obj. This way everything works well also in FF for Mac (which I use). (Fig. 2).

This issue comes out when the grid or the borderLayout which contains the grid is 100% width.
Or at least this is my case.

Bye

[Hostile Fork]

FF/Mac scrollbars are like one giant bug. There is no known workaround yet.

I've read that this is fixed in Firefox 3 (http://https://bugzilla.mozilla.org/show_bug.cgi?id=187435), but it might be a long time before that's commonplace. There are a lot of OS/X Firefox 2 installations, and I consider them relevant! Might be worth it to invest in a radical workaround?

It seems that ext-js does a lot of other impressive stuff... couldn't it replace the system scroll bars with a custom DHTML widget that didn't have these Z-order problems? Would be nice for skinning; I sort of feel the Aqua scroll bar doesn't look very good with the theme anyway. Everything else looks rolled from scratch...how hard might it be?

Overall the framework seems very well done so I hate to complain. But this popped up instantly when I tried the desktop demo (http://extjs.com/deploy/dev/examples/desktop/desktop.html) and dragged the accordion window over top of the scroll bar on the right of the grid window. Broke my heart to see it. :((

[ronz]

Certain firefox themes don't have this problem, nor the scrollbar-through-the-dialog issue.

Obviously, this isn't a fix...nor something that you can rely on an end-user having installed...just an observation.

[Hostile Fork]

Certain firefox themes don't have this problem, nor the scrollbar-through-the-dialog issue.

Obviously, this isn't a fix...nor something that you can rely on an end-user having installed...just an observation.

Hmmm, thanks for the heads up. Since this is a fairly pervasive bug affecting more than just extjs, I thought I'd use theming to make a workaround. After all, even when Firefox 3 is released some people might be stuck with 2 for legacy reasons.

What I did was I put together two themes that fixed the problem but look like un-themed Firefox on the Mac: one is for when the scroll buttons are together, and another for when they're at the top and bottom. I hoped it would be much easier and just a matter of taking the scroll bars out of a mac-like theme and transplanting them onto the classic theme. But it wasn't, so I ended up having to learn some CSS and draw some bitmaps:

http://hostilefork.com/2007/11/06/workaround-firefox-scrollbar-bug-on-mac/

If anyone has feedback, post it as a comment on the article and let me know...!

HF.

[evanc]

Did anyone find a solution to this problem? I'm experiencing something similar except the scrollbar disappears completely when you move the mouse over it.

I was able to work around this bug by rapidly switching the element's overflow property from "auto" to "hidden" and back to "auto".

Here's the change I put in my code to fix ComboBox:
Ext.form.ComboBox.prototype.expand = function(){
if(this.isExpanded() || !this.hasFocus){
return;
}
this.list.alignTo(this.el, this.listAlign);
this.list.dom.style.overflow='hidden'; // fixes bug in OSX FF2
this.list.show();
var fixMenu = function (el) {el.dom.style.overflow = 'auto'}; // fixes bug in OSX FF2
fixMenu.defer(1, undefined, [this.list]);
Ext.get(document).on('mousedown', this.collapseIf, this);
Ext.get(document).on('mousewheel', this.collapseIf, this);
this.fireEvent('expand', this);
};
Note that it doesn't work if you don't put some cycles between setting style.overflow = 'hidden' and setting it back to 'auto' -- that's why there's a defer of 1 millisecond in there. (In practice the switch is made imperceptibly) There's probably a better way to do this but I haven't found it yet.

I'd be interested if anyone has any improvements on this method.

[minimeu]

I used the core code of "evanc", but, I had to change it a little bit so I could work around my problem.
In Firefox 2.0.0.11 on a Windows Operating System the combo box list did not show it was there but much to the right and was hidden.
Here is my approach based on the "evanc"'s code:

// Prevent error on combo box display in Firefox.
Ext.form.ComboBox.prototype.expand = function(){
this.list.dom.childNodes[0].style.top = '0';
this.list.dom.childNodes[0].style.left = '0';
this.list.dom.childNodes[0].style.width = '100%';
this.list.dom.childNodes[0].style.overflowX = 'hidden';
if(this.isExpanded() || !this.hasFocus){
return;
}
this.list.alignTo(this.el, this.listAlign);
this.list.dom.style.overflow = 'hidden'; // fixes bug in OSX FF2
this.list.show();
var fixMenu = function (el) {el.dom.style.overflow = 'hidden'}; // fixes bug in OSX FF2
fixMenu.defer(1, undefined, [this.list]);
Ext.get(document).on('mousedown', this.collapseIf, this);
Ext.get(document).on('mousewheel', this.collapseIf, this);
this.fireEvent('expand', this);
};

[brian.moeskau]

I have put a fix into 2.0 in SVN that should resolve this. I found the same thing that evanc did regarding switching overflow hidden/auto by playing around with the overflow in Firebug. However, I also found that the bug is very sensitive to display:none changes. There were several spots in Panel and Window, in addition to ComboBox, that required the same workaround. Here's the patch code, similar to evanc's:


// in Ext.Element
setOverflow : function(v){
if(v=='auto' && Ext.isMac && Ext.isGecko){
this.dom.style.overflow = 'hidden';
(function(){this.dom.style.overflow = 'auto';}).defer(1, this);
}else{
this.dom.style.overflow = v;
}
}


Then in several components I added calls to set the overflow on the component's element using this function. This was not a fun one to figure out!

@minimeu: I've never seen this issue on Windows, and my fixes were FF/Mac specific. Can you provide a test case that shows the issue on Windows?

[lgerndt]

Nice! I see this in Ext 2.0 and it works like a charm for the combo boxes as is.

Note for all: to make this fix active for Windows in which you embed a panel that has a scroller, be sure to set the Window's config autoScroll:true.

[Choleriker]

Nice! I see this in Ext 2.0 and it works like a charm for the combo boxes as is.

Note for all: to make this fix active for Windows in which you embed a panel that has a scroller, be sure to set the Window's config autoScroll:true.

Hey,

i have the same problem with windows in my jsDesk invironment. autoScroll:true on the window doesnt work. Any other ideas?