badahutong.com

The first time I click on the combo trigger, the list appears about 10px misaligned to the left. I collapse the combo, and every subsequent showing aligns correctly. There are some attached screenshots so you can see what I'm talking about. The relevant portion of my code is below:


var panel = new Ext.Panel({
id: 'request-filter-' + filter_id,
bodyStyle: {paddingBottom:'10px'},
layout: 'column',
border: false,
items: [{
columnWidth: 0.25,
xtype: 'panel',
bodyStyle: {paddingRight:'10px'},
border: false,
items: [{
id: 'request-filter-column-' + filter_id,
autoWidth: true,
xtype: 'combo',
store: columns,
mode: 'local',
triggerAction: 'all'
}]
}, {
columnWidth: 0.25,
xtype: 'panel',
bodyStyle: {paddingRight:'10px'},
border: false,
items: [{
id: 'request-filter-operator-' + filter_id,
xtype: 'combo',
store: operators,
mode: 'local',
triggerAction: 'all'
}]
}, {
columnWidth: 0.25,
xtype: 'panel',
bodyStyle: {paddingRight:'10px'},
border: false,
items: [{
id: 'request-filter-value-' + filter_id,
xtype: 'textfield'
}]
}, {
columnWidth: 0.25,
xtype: 'panel',
html: buttons,
border: false,
bodyStyle: {paddingTop:'3px'}
}]
});
var fp = Ext.getCmp('filter-chooser-panel');
var idx = fp.items ? fp.items.indexOf(Ext.getCmp('request-filter-' + i)) + 1 : 0;
fp.insert(idx, panel);
fp.doLayout();


Any ideas what needs to be done to get it to align correctly? I'm not experiencing this problem in IE7 (odd, I know). Several things I've already tested:

It's not the container's padding. The same thing happens when the container has padding of 0. It's not the insert/doLayout either. The same thing happens even when I don't use this method. All other suggestions are very much appreciated!

Tags: badahutong.com edit //