[2.2][DUP] collapse/expand = layout issues for FF

[MarkT]

I don't know if this is already known. I didn't find it when I searched.

If a panel with a layout of 'form' is collapsed and expanded on Firefox, its items aren't in the same layout when the the expand is complete, which results in them jumping back into the correct layout. You can see it better if you animate the expand.

I've pulled some code off my site to help demo this. You may need to tweak it a bit to get it working. Call addPhotoUploaded to insert a new panel. I've added 'defer' to the collapse and expand functions for this demo. The "caption" field jumps after the expand anim is complete.


var photoUploaded = {
xtype: 'panel',
layout: 'form',
bodyStyle: 'padding:10px 10px 0 10px;',
anchor: '-18',
hideMode: 'offsets',
collapsed: false,
hidden: true,
animCollapse: true,
frame: true,
defaults: {hideMode:'offsets'},
items: [
{
xtype: 'textfield',
name: 'caption',
emptyText: 'describe the photo',
fieldLabel: 'Caption'
}
]
};

var step4 = new Ext.Panel({
id: 'step4',
xtype: 'panel',
layout: 'anchor',
title: 'upload photos',
autoScroll: true,
bodyStyle: 'padding:10px 10px 0 10px;',
items: [{
id: 'photoPanel',
xtype: 'form',
layout: 'form',
renderTo: 'photo-form',
fileUpload: true,
frame: true,
title: 'Upload a Photo',
url: 'dummy.php',
bodyStyle: 'padding: 10px 10px 0 10px;',
anchor: '-18',
labelWidth: 64,
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'select a photo',
allowBlank: false,
fieldLabel: 'Filename',
name: 'photo',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
}
],
buttons: [
{
text: 'Upload',
handler: function(e){
// submit the photo
}
}
]
}]
});

var addPhotoUploaded = function addPhotoUploaded(){
var newPhotoPanel = Ext.getCmp('step4').insert(1, photoUploaded);
Ext.getCmp('step4').doLayout();
newPhotoPanel.getEl().setStyle('margin-top','1px');
newPhotoPanel.collapse.defer(512, newPhotoPanel, [false]);
newPhotoPanel.show();
newPhotoPanel.expand.defer(1024, newPhotoPanel, [true]);
}

The cause is simple. The following line in ext-all.css:

.ext-gecko .x-panel-animated div{overflow:hidden!important;}

I know that if you don't put overflow=hidden on elements prior to animation, Firefox has rendering issues. The problem is that the CSS puts overflow=hidden on EVERY div that is a descendant of .x-panel-animated. The following CSS works better, and doesn't mess up the panel's items:

.ext-gecko div.x-panel-animated > div{overflow:hidden!important;}

mark

ps - http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

[evant]

This has been reported before.