PDA

View Full Version : Resizing of TextArea breaks FormPanel's layout



Baidaly
23 Oct 2013, 2:39 PM
REQUIRED INFORMATION

Ext version tested:


Ext 4.2.1.883

Browser versions tested against:


Chrome 28.0.1500.95 m
FF24.0

Description:


Resizing of TextArea breaks FormPanel's layout

Steps to reproduce the problem:


Create the FormPanel with few TextFields and one resizable TextArea between them
Resize the TextArea beyond the FormPanel's boundary
The FormPanel's ScrollBar is shown
Resize the TextField again to a smaller size

The result that was expected:


The FormPanel's is correct and all items on their place

The result that occurs instead:


The FormPanel's layout breaks

Test Case:
https://fiddle.sencha.com/#fiddle/14u


Ext.onReady(function() {
Ext.create("Ext.form.Panel", {
labelWidth: 110,
height: 500,
renderTo: Ext.getBody(),
width: 350,
autoScroll: true,
items: [{
xtype: "textfield",
anchor: "100%",
fieldLabel: "A"
}, {
xtype: "textfield",
anchor: "100%",
fieldLabel: "B"
}, {
xtype: "textareafield",
anchor: "100%",
resizable: {
handles: "s"
},
fieldLabel: "C"
}, {
xtype: "textfield",
anchor: "100%",
fieldLabel: "D"
}, {
xtype: "datefield",
anchor: "100%",
fieldLabel: "E",
format: "d.m.Y"
}],
bodyPadding: 5,
fieldDefaults: {
labelAlign: "top"
}
});
});


HELPFUL INFORMATION

Screenshot:
Initial layout:
046511
Resize the TextArea, FormPanel's scrollbar is visible

46512
Resize the TextArea back to initial size. Layout is broken, fields A and B are not visible

46513

Possible fix:


Not found



Additional CSS used:


only default ext-all.css



Operating System:


Win7 Pro

Gary Schlosberg
23 Oct 2013, 4:12 PM
Thanks for the report, but I'm not able to recreate this one. I've tried in FF and Chrome in Mac OS and Chrome, FF and IE in Windows 7, various versions. Any suggestions to help me reproduce?

Baidaly
23 Oct 2013, 4:23 PM
Thank you for your response.

Try to look at this ScreenCast: http://screencast-o-matic.com/watch/cI6Zc3VsgN