View Full Version : Textarea collapses to 3 lines when rendered in IE. In FF runs fine

2 Dec 2010, 12:50 PM
I have an application running multiple tabs and in some tabs are textareas. These textareas need to size to fit the area of the tab for each tab they fill. For now if I run the app in FF, I do not have an issue with the textareas. If I re-size the FF browser window, then the textareas re-size. If I run the same app in Internet Explorer, the textareas collapse down to 3 lines. How do I fix this? Do I need to set heights on the textareas? I want to still be able to keep the ability for the textareas to re-size as the browser re-sizes.

this is how I have one of my textareas set up:

var panelPerforcePlf = {
id : 'panelPerforcePlf',
title : 'Create an engineering PLF from a CRM build',
frame : true,
layout : 'anchor',
labelAlign : 'right',
items : [
xtype : 'container',
height : 80, // needs to be a fixed height?
labelWidth : 100,
layout : 'hbox',
layoutConfig : { align : 'stretch' },
items : [ fieldset1P4, fieldset2P4 ]
anchor : '0 -80', // For some reason, this won't work in IE. Works in every other browser.
items : [
xtype : 'textarea',
style : 'width: 98.5%; height: 99%;',
readOnly : true,
id : 'plfContentP4'

3 Dec 2010, 6:26 AM
You are overnesting. Why use a panel (without a layout!) to hold a textarea?

Just use the textarea directly as one of the anchor layout items and specify the anchor in the config (and remove the style because 'anchor' will now set the size).

ps. On older Ext versions you might need to specify a small negative width in the anchor to make it work in IE, e.g. anchor:'-3 -80'.