PDA

View Full Version : ComboBox and label get misaligned when container is resized



kpiland
8 Feb 2012, 7:09 AM
I have a resizeable form that contains a ComboBox where the ComboBox expands in width to fill available area. Sometimes when the container is resized, the dropdown part of the ComboBox gets misaliged with the label. It ends up displayed as if it's on the next line from the label instead of beside it. I've noticed in the example below that when it gets in this state, I can simply click on the border of the Ext window and the ComboBox jumps back into position. The effect happens when the container is made smaller - or when it is made larger, then smaller again. I've observed the behavior in IE8, but not in Firefox or Chrome.
I've boiled this down to a very simple example.


var parentObjectStore = new Ext.data.ArrayStore({
data : [[1, 'ABC'],[2, 'XYZ']],
fields: ['id','name']
});


function buildWindow() {
var win = new Ext.Window({
id: 'myWindow',
title: 'Combo Example',
width: 300,
height: 100,
layout: 'form',
items:[
{
xtype: 'combo',
fieldLabel: "Parent Document",
store: parentObjectStore,
displayField: 'name',
itemSelector: 'div.combo-result-item',
mode: 'local',
editable: false,
triggerAction: 'all',
lazyRender: true,
anchor: "98%"
}
]
});
win.show();
}


Ext.onReady(buildWindow);


Here is a picture of that it looks like when it gets in the bad state:
31490

It seems like I need to force a layout or resize somewhere, but I'm not sure where. I suppose this could be resolved by using a different layout the defines the label and combo separately, but it seems 'better' not to do that.

mitchellsimoens
8 Feb 2012, 7:40 AM
Sounds like the anchor 98% isn't enough. Try a smaller %

kpiland
8 Feb 2012, 8:16 AM
Thanks for the suggestion, but that did not work. I tried setting it down as far as 80% and can still produce the problem. I've figured out that the way to easily reproduce the problem using the posted example is to drag the right edge of the Ext window to the left of the current position of the dropdown arrow on the combobox. To provide more space, you can first stretch the screen to the right. I have to wonder whether this might be a screen redraw problem of some sort in IE.