View Full Version : [FIXED][2.x,3.x] TextField and TextArea width

18 Apr 2009, 1:22 PM
The width of TextFields and TextAreas in IE 6, 7 and 8 and Opera is often calculated wrong.

Try the following example in IE 6, 7 and 8 and Opera in both standard and quirks mode:

new Ext.Viewport({
layout: 'form',
items: [{
anchor: '0',
xtype: 'textfield',
fieldLabel: 'Label'
anchor: '0',
xtype: 'textarea',
fieldLabel: 'Label'

You'll notice that the width of the fields is almost always wrong and this can even cause the textarea to become invisible (in IE6) or shift down (in IE7).

I did a thorough check of all browsers and found that this will fix all width problems:

Ext.override(Ext.form.Field, {
adjustWidth : function(tag, w){
if(typeof w == 'number' && !this.normalWidth &&
(Ext.isIE6 || !Ext.isStrict) && /input|textarea/i.test(tag) && !this.inEditor){
return w - 3;
return w;
(I have no idea why the original code was so complicated)

ps. TextFields and TextAreas in IE8 also need these CSS additions:

.ext-strict .ext-ie8 .x-form-text, .ext-strict .ext-ie8 textarea.x-form-field {
margin-bottom: 1px;
.ext-gecko .x-form-text, .ext-ie8 .x-form-text {
padding-top: 2px;
padding-bottom: 0px;

26 Apr 2009, 1:00 AM

5 May 2009, 2:13 AM
Moved from the 2.x to the 3.x bugs section in the hope it will get more attention here...

6 May 2009, 9:30 AM
Thanks for the report, I'll check it out.

18 May 2009, 12:06 AM
Condor, with your code I was getting differing results, for example try that override and your sample in Opera or FF in quirks and strict mode. Is the || isStrict in the condition meant to be like that?

21 May 2009, 2:32 AM
Seems to be the case, fixed in SVN.

18 Aug 2013, 5:53 PM