PDA

View Full Version : [FIXED-742][3.0.3] Combo box arrow is rendered bad in Safari (Windows) and Chrome



zvi
14 Dec 2009, 10:47 PM
B]Ext version tested:[/B]

Ext 3.0.3


Adapter used:

ext or jquery


css used:

only default ext-all.css





Browser versions tested against:

____
IE8 - works fine
FF3 - - works fine
Safari 4 - BUG
Chrome 4 - BUG



Operating System:

________
WinXP Pro


Description:

Combo box arrow is rendered bad in Safari (Windows) and Chrome, this happens when using labelStyle attribute (labelStyle:"width:100px"). screenshot is attached
Test Case:



Ext.onReady(function(){
var fs = new Ext.FormPanel({
frame: false,
title:'XML Form',
labelWidth: 85,
width:600,
renderTo:"form-ct",
items: [
{
xtype : "combo",
store : [['Automatic',"Automatic"],
['10Half',"10Mbps Half Duplex"],
['10Full', "10Mbps Full Duplex"],
['100Half', "100Mbps Half Duplex"],
['100Full',"100Mbps Full Duplex"],
['1000Full',"1000Mbps Full Duplex"]],
typeAhead : true,
triggerAction : 'all',
forceSelection: true,
width :200,
labelStyle:"width:145px",
fieldLabel : "Some Label",
name : 'speed',
hiddenName : 'speed'
}


]
});

});





Screenshot or Video:

attached


Debugging already done:

none


Possible fix:

not provided

jnadler
15 Dec 2009, 11:45 AM
I'm having the same problem. In our case the drop-down arrow button appears all the way at the left of the box. I only see this problem in Safari, it is fine in FF and IE. I haven't tested Chrome yet.

I am not using labelStyle however:


{
xtype: 'combo'
,id: 'mailProtocolCombo'
,name: 'mailProtocol'
,fieldLabel: this.mailProtocolLabel
,editable: false
,width: 250
,displayField: 'name'
,valueField: 'id'
,mode:'local'
,triggerAction: 'all'
,selectOnFocus: true
,store: new Ext.data.SimpleStore({
fields : ['id', 'name'],
data : mailAddressProtocol
})
,listeners: {
'select': this.onMailProtocolChange
,scope: this
}
}

evant
15 Dec 2009, 3:21 PM
In form.css, try removing the rule that sets right: 0 for webkit browsers.

jnadler
15 Dec 2009, 3:26 PM
Yes, that does indeed fix it. Thanks, I presume this will get fixed in a future build and I'll just need to run an edited CSS for now?

I guess the reason it renders in the middle for the OP was his use of:

labelStyle:"width:145px"

Thanks for the help,

Jeff

jmariani
16 Mar 2010, 3:15 PM
Hi.

On Ext 3.2 beta the bug is still not fixed. evant's fix works.

Cya.

evant
18 Mar 2010, 9:30 PM
Fixed in svn, rev 6328.