Combo box alignment problem in Firefox

[Abisha]

Hai friends!

I am designing a form for signup new user. My form containing 3 combo boxes and textfields. Textfields aligning properly. But space between field label and combo box is more than other field. And also the options of combo is not displaying properly. It is showing vertically half of the day.

Please can you give me a solution anybody?

Thanks in advance!.



file:///C:/DOCUME%7E1/DEVELO%7E1/LOCALS%7E1/Temp/moz-screenshot.jpgfile:///C:/DOCUME%7E1/DEVELO%7E1/LOCALS%7E1/Temp/moz-screenshot-1.jpg
var Form_signup_details = new Ext.FormPanel({
id:'sign_up_details',
method: 'POST',
//region : 'left',
renderTo: 'signup_details',
layout:'form',
id:'signup_details',
frame:true,
bodyStyle:'padding:5px 25px 5px',
width: 650,
height:800,
//labelWidth:150,
defaults: {
labelStyle: 'font-family:arial; font-size:11px; color:#416AA3'
},
items: [{
columnWidth:.5,
xtype: 'component',
autoEl:{ tag:'div',
children:[{tag:'img',src: 'user/images/main.gif',cls:'item-space1'},
{tag: 'a', href: '#',onclick:'back_signup();',
children:[{tag: 'img', src: 'user/images/back.gif',cls:'item-space2'}]
},{tag: 'a', href: '#',onclick:'back_login();',
children:[{tag: 'img', src: 'user/images/cancel.gif'}]
}]
}
},{
xtype:'label',
text: "We need to gather some information from you to complete your Member account. Please answer the following questions below. Where you see an * indicates you must provide information for that particular item.",
cls:'x-form-item txt',
anchor:'98%'
},{
xtype:'label',
cls:'x-form-item head',
text:'Profile Info'
},{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'firstname',
allowBlank: false,
id: 'firstname',
width:180,
height:20,
blankText: 'Enter First Name!'
},{
xtype:'textfield',
fieldLabel: 'Middle Initial',
name: 'middleinitials',
id: 'middleinitials',
width:180,
height:20
},{
xtype:'textfield',
fieldLabel: 'Last Name',
blankText: 'Enter Last Name!',
allowBlank: false,
name: 'lastname',
id: 'lastname',
width:180,
height:20
}, {
xtype:'textfield',
fieldLabel: 'Email Address',
name: 'email',
allowBlank: false,
id: 'email',
blankText: 'Enter Email Address!',
vtype:'email',
width:180,
height:20
},{
xtype:'combo',
allowBlank: false,
width:180,
height:20,
id:'language',
name:'language',
displayField:'language',
valueField:'language',
store: new Ext.data.SimpleStore({
fields: ['lang_id', 'language'],
data : Ext.exampledata.lang
}),
fieldLabel:"Language",
mode:'local',
triggerAction:'all',
emptyText:'Select a Language...'
},{
//columnWidth:.5,
xtype:'label',
cls:'x-form-item head',
text:'Member ID / Password Info'
},{
//columnWidth:.5,
xtype:'textfield',
fieldLabel: 'Member ID',
allowBlank: false,
name: 'user_id',
id: 'user_id',
width:180,
height:20
},{
//columnWidth:.5,
xtype:'textfield',
inputType:'password',
fieldLabel: 'Password',
allowBlank: false,
name: 'password',
id: 'password',
width:180,
height:20
},{
//columnWidth:.5,
xtype:'textfield',
fieldLabel: 'Retype the Password',
inputType:'password',
allowBlank: false,
name: 'signup_pwd_re',
id: 'signup_pwd_re',
width:180,
height:20
},{
xtype:'label',
cls:'x-form-item head',
text:'If you forget your Password we will ask you the following'
},{
xtype:'combo',
allowBlank: false,
id:'choose_question',
name:'choose_question',
displayField:'ques',
valueField:'ques',
width:180,
height:20,
store: new Ext.data.SimpleStore({
fields: ['ques'],
data : Ext.exampledata.ques
}),
fieldLabel:"Choose a Question",
mode:'local',
triggerAction:'all',
emptyText:'Select a Question...'
},{
//columnWidth:.5,
xtype:'textfield',
fieldLabel: 'Answer to your Question',
allowBlank: false,
name: 'answer_question',
id: 'answer_question',
width:180,
height:20
},{
xtype:'label',
cls:'x-form-item head',
text:'Repair Center Info'
},{
xtype:'combo',
width:120,
align:'left',
id:'specify_repair',
name:'specify_repair',
displayField:'repair_center_name',
valueField:'repair_center_id',
store: loginrepair_store,
autoScroll:true,
editable: false,
mode: 'local',
selectOnFocus:true,
triggerAction:'all',
width:180,
height:20,
emptyText:'Specify your Repair Center!'
},{
xtype:'label',
cls:'x-form-item head',
text:'Terms of Use'
},{
xtype: 'checkbox',
anchor:'98%',
boxLabel: 'I have read and accept the terms of use. (see below)',
name: 'term_check',
labelSeparator : '',
itemCls:'td-east',
id:'term_check',
inputValue: 'terms'
},{
buttons: [{
text: 'OK',
name: 'sign_up_ok',
id: 'sign_up_ok'
}
]},{
xtype:'textarea',
labelSeparator : '',
readOnly: true,
allowBlank: true,
value:'default value',
height:200,
width:200
}]
});

[dirtdevil]

Same here. I have two combo boxes that have alignment thats off. I remember someone saying a while ago that the combo boxes alignment gets screwy when you hide the drop down arrow on the right but in my case I have to because I need the combo boxes to be larger then they normally so the new size makes the drop down arrow look screwed up.


id: 'form',
labelAlign: 'left',
bodyStyle: 'background-color: #6C59AA; padding:5px 5px 0;',
hideBorders: true,
items: [{
layout:'column',
hideBorders: true,
defaults: {
bodyStyle: 'background-color: #6C59AA; color: white;',
hideBorders: true
},
items:[{
columnWidth:.5,
layout: 'form',
defaults: {
fieldClass: 'fieldStyle',
labelStyle: 'width: 150px;'
},
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first'
},{
xtype:'textfield',
fieldLabel: 'Company',
name: 'company'
},{
xtype:'textfield',
fieldLabel: 'City',
name: 'city'
},{
xtype:'textfield',
fieldLabel: 'Person Visited',
name: 'employee'
}]
},{
columnWidth:.5,
layout: 'form',
defaults: {
fieldClass: 'fieldStyle',
labelStyle: 'width: 150px;'
},
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last'
},{
xtype:'combo',
fieldLabel: 'US Citizen',
name: 'Citizen',
triggerAction: 'all',
editable: false,
listWidth: 55,
mode: 'local',
style: 'margin-right: 60px;',
hideTrigger: true,
value: '',
valueField: 'myid',
displayField: 'myid',
listeners: {
select: function(cmbo,r){
if(r.data.myid=='NO'){
Ext.getCmp('Country_ID').container.up('div.x-form-item').show();
} else {
Ext.getCmp('Country_ID').container.up('div.x-form-item').hide();
}
}
},
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myid'
],
data: [
['test'],
['ing']
]
})
},{
xtype:'combo',
fieldLabel: 'State',
name: 'state_ID',
triggerAction: 'all',
editable: true,
listWidth: 160,
mode: 'local',
hideTrigger: true,
value: '',
forceSelection: true,
valueField: 'id',
displayField: 'label',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'id','label'
],
data: Ext.states
})
},{
id: 'Country_ID',
xtype:'combo',
itemId: 'Country_ID',
fieldLabel: 'Country',
name: 'country_ID',
triggerAction: 'all',
editable: true,
listWidth: 100,
mode: 'local',
hideTrigger: true,
value: '',
valueField: 'myid',
displayField: 'myid',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myid'
],
data: [
['YES'],
['NO']
]
})
}]
}]
}],
buttons: [{
text: 'Go Back',
scale: 'large',
handler: function(){
Ext.getCmp('mainpanel').getLayout().setActiveItem(1);
}
},{
text: 'Sign In',
scale: 'large'
}]

}]

[dirtdevil]

bump bump

[carol.ext]

How about a screen shot and / or a runnable example?

[latifah123]

i have the same problem with combo box

(http://mybeatmakingsoftware.net/18/the-best-beat-making-software/)

[dirtdevil]

I can't post a live url. But US Citizen and State are the two culprits. Anything I do doesn't work. I tried firebug and manually making css changes to those containers/components and they don't budge.

[Arcadius]

I had a similar problem in an application I was making. I had an editor grid within an ExtJS grid, and one of the editors was a comboBox. Whenever I tried to edit the cell that had the comboBox, the comboBox would appear shifted to the right, so the drop down arrow was only half visible, and the other half would be hidden beneath the cell beside it.

Anyways, I finally found a fix to my problem, and it was a decently simple one. You can apply styles to your comboBox's which will allow you to shift them, change their size, etc.

I added this parameter to my comboBox:

style:'margin:0px 0px 0px -18px;'

which allowed me to shift it over to the left 18 pixels and made it appear perfectly!
You can obviously use different parameters other than margin, like padding, border, offset.

(You appear to have
style: 'margin-right: 60px;',
in your code, try changing that.)

[dirtdevil]

tried it on US Citizen and thats as far as it can go in any direction...

I tried
style: 'margin: -18px -18px -18px -18px;',
and
style: 'margin-right -18px; margin-left -18px;',
and
style: 'margin-right 18px; margin-left 18px;',

and it doesn't budge from the right margin. heres the code...


id: 'form',
labelAlign: 'left',
bodyStyle: 'background-color: #6C59AA; padding:5px 5px 0;',
hideBorders: true,
items: [{
layout:'column',
hideBorders: true,
defaults: {
bodyStyle: 'background-color: #6C59AA; color: white;',
hideBorders: true
},
items:[{
columnWidth:.5,
layout: 'form',
defaults: {
fieldClass: 'fieldStyle',
labelStyle: 'width: 150px;'
},
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
tabIndex: 1
},{
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
tabIndex: 3
},{
xtype:'textfield',
fieldLabel: 'City',
name: 'city',
tabIndex: 5
},{
xtype:'textfield',
fieldLabel: 'Person Visited',
name: 'employee',
tabIndex: 7
}]
},{
columnWidth:.5,
layout: 'form',
defaults: {
fieldClass: 'fieldStyle',
labelStyle: 'width: 150px;'
},
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
tabIndex: 2
},{
xtype:'combo',
fieldLabel: 'US Citizen',
name: 'Citizen',
triggerAction: 'all',
editable: true,
listWidth: 55,
forceSelection: true,
mode: 'local',
style: 'margin: -18px -18px -18px -18px;',
hideTrigger: true,
value: '',
valueField: 'myid',
displayField: 'myid',
tabIndex: 4,
listeners: {
select: function(cmbo,r){
if(r.data.myid=='NO'){
Ext.getCmp('Country_ID').container.up('div.x-form-item').show();
} else {
Ext.getCmp('Country_ID').container.up('div.x-form-item').hide();
}
}
},
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myid'
],
data: [
['YES'],
['NO']
]
})
},{
xtype:'combo',
fieldLabel: 'State',
name: 'state_ID',
triggerAction: 'all',
editable: true,
listWidth: 160,
mode: 'local',
hideTrigger: true,
value: '',
forceSelection: true,
valueField: 'id',
displayField: 'label',
tabIndex: 6,
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'id','label'
],
data: Ext.states
})
},{
id: 'Country_ID',
xtype:'combo',
itemId: 'Country_ID',
fieldLabel: 'Country',
name: 'country_ID',
triggerAction: 'all',
editable: true,
listWidth: 150,
mode: 'local',
hideTrigger: true,
value: '',
valueField: 'cid',
displayField: 'clabel',
forceSelection: true,
tabIndex: 7,
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'clabel',
'cid'
],
data: Ext.countries
})
}]
}]
}],
buttons: [{
text: 'Go Back',
scale: 'large',
handler: function(){
Ext.getCmp('mainpanel').getLayout().setActiveItem(1);
}
},{
text: 'Sign In',
tabIndex: 8,
scale: 'large'
}]

[Arcadius]

The picture you attached shows that it did move a little, can you try:
style:'margin:0px 0px 0px -60px;

the last index is the one for moving it to the left (-60px), I don't think you need to change the first three 0px's.

[dirtdevil]

I have a similar problem on this thread...

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

[msarath]

:( have similar problem, please check the attached images how the list is shown in FF 3.5.
In IE8, combobox displaying properly but when expanded the width is same as in FF screen shot attached.
I tried with following suggestions...

style:'margin:0px 0px 0px -60px;',
cls: 'fieldStyle',

Below is my code which generates combo....
Any help is greatly appreciated ~o)



this.loadUserRight = function() {
var user_Form = new Ext.FormPanel({
xtype: 'fieldset',
id:'user_Form',
bodyBorder : false,
labelWidth: 90,
defaults: {width: 240}, // Default config options for child items
defaultType: 'textfield',
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding:5px 0 5px 15px;' : 'padding:10px 15px;',
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right":
Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
},
items: [{
xtype: 'combo',
id:'usertimeZone',
fieldLabel: 'Timezone',
name:'usertimeZone',
triggerAction: 'all',
selectOnFocus: true,
store:WSM.IN.userProfile.timezoneStore,
mode: 'local',
displayField: 'display',
forceSelection: true,
width:200,
typeAhead: true,
value: '(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi',
tabIndex:11,
autoScroll: true
}]
});
return user_Form;
}

[msarath]

B) I was able to make the width of list when expanded similar to the default display width by adding..
listWidth attribute value same as width.

But the list arrow button still on left in FF.
IE8.0 everything is perfect.

Any suggestions please....

[msarath]

Can anybody please help me on this....:s

[dirtdevil]

I never really found a solution that would make the combo box work in both IE and FF. My suggestion would be to just sniff for what ever browser there using and use one form layout for IE and another for FF. It's not FF's fault this is such a hassle...it's IE's.