PDA

View Full Version : [FIXED-901] Form Fields Within Window Glitch on Firefox v3



andrew.howard@gtri.gatech.edu
18 Feb 2009, 9:29 PM
I am running Firefox v3.0.6 on a Mac with Ext 2.2.

I have a FormPanel within a Window component which is displaying a weird glitch. an image is displayed next to some of the form fields (the fileUploadField and the Radio Buttons) but not next to the textField. The image looks like a gradient background image.
You can see what it looks like from the attached images.
*The first image is the Firefox V3.0.6 on Mac
*Second is IE6 on Windows
*Third is Safari on Mac

I tested the same code in Safari, Chrome, and IE6 and it works perfect for all of those. Also the radio buttons are rendering toolbars under them which is another glitch that needs to be solved. Here is my code:



Ext.onReady(function(){
var win = new Ext.Window({
layout : 'fit',
width : 500,
height : 300,
closeAction :'hide',
plain : true,
items :
new Ext.FormPanel({
title : 'Your name',
monitorValid : true,
defaults: {
allowBlank: false,
anchor: "90%",
msgTarget: 'side'
},
items : [{
xtype: 'textfield',
fieldLabel: 'Text Field'
},{
xtype: 'fileuploadfield',
emptyText: 'Notice the Image to the right -->',
fieldLabel: 'File Upload Field'
},{
xtype: 'radiogroup',
fieldLabel: 'Label',
columns: 1,
items: [
{boxLabel: 'Value 1', name: 'actionType', inputValue: 1},
{boxLabel: 'Value 2', name: 'actionType', inputValue: 2, checked: true},
{boxLabel: 'Value 3', name: 'actionType', inputValue: 3}
]
}]
})
});
win.show();
});


Anyone know the solution/workaround for this issue?:-/

jsakalos
18 Feb 2009, 10:44 PM
I do not see anything wrong with your code. Could it be that FF caches some old css files or, do you use your own css files? If yes, try to remove them temporarily.

I would check also if id are unique on the page and if window is not re-create if it already exists (you have closeAction:'hide')

I get this if I run your code in FF-3.0.6@Linux:

andrew.howard@gtri.gatech.edu
19 Feb 2009, 12:07 AM
I forgot to mention that I was running it on a Macintosh.

I tested it in Firefox v3.0.6 on a WindowsXP box and it worked fine.

For the Macintosh, I have the cache disabled and I deleted all temporary files and private data. The problem still exists.

andrew.howard@gtri.gatech.edu
19 Feb 2009, 12:35 AM
So I tested it in Firefox v2 on Macintosh and it appears that the image that looked like a gradient was actually a scrollbar. I couldnt tell until I saw it in Firefox v2. See the screenshot below.

So it seems that Firefox v2 and v3 on Macintosh produce scrollbars on certain form elements when put inside of a window.

FYI, I tested just the formPanel rendered to the document.body without putting it inside a Window and it renders just fine (without the scrollbars)

Can anyone with a Mac double check my results to make sure its not just my computer? Im pretty sure its not but just to make sure.

update:
I played around with the CSS using firebug and realized that in this declaration


.ext-gecko .x-window-body .x-form-item { //ext-all.css (line 242)
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
overflow:auto;
}

if I remove the "overflow:auto" or change it to "hidden" it fixes the problem.

any explanations?

jsakalos
19 Feb 2009, 2:24 AM
Could be a bug. Anyway, I cannot help you more as I have no Mac around. Try to search bugs forum and if it has not been already reported report it as a bug please.

andrew.howard@gtri.gatech.edu
19 Feb 2009, 11:11 AM
Here is a bug report with this same issue: Bug with this issue (http://extjs.com/forum/showthread.php?p=291487#post291487)

It appears to have been written early 2008 so im wondering if its being fixed?

jsakalos
19 Feb 2009, 12:25 PM
Bugs are usually fixed in SVN first so you can try the latest revision. In any case feel free to mail to support@extjs.com

S├ębastien Dolard
23 Apr 2010, 6:14 AM
Hi
This, bug is not fixed.
I 'm using ff 3.6.3 on mac.

I'm using last version of extjs (branch 3)

jsakalos
23 Apr 2010, 12:41 PM
Yes, it is a bug. Use this as workaround:


<style type="text/css">
.ext-mac.ext-gecko .x-window-body .x-form-item {
overflow:hidden;
}
</style>

Jamie Avins
23 Apr 2010, 1:13 PM
Thanks Saki, I'll have Jay look into it.

S├ębastien Dolard
25 Apr 2010, 10:46 PM
Yes, I saw this.
Thanks

jayrobinson
28 May 2010, 5:09 PM
Committed. Thanks, jsakalos.

specialjyo
13 Sep 2010, 7:15 AM
I'm still seeing this if I dont use the workaround that was posted. I'm using Ext v 3.2.1 and FF 3.6.9 on Mac OS X. Did it not make it into that release?

jsakalos
13 Sep 2010, 12:35 PM
I don't know about 3.2.1 but the workaround I've posted is in ext-all.css in 3.2.2.