PDA

View Full Version : Basic HBOX Layout problem - textfield height is stretched



IvanJ
9 Mar 2011, 1:18 PM
I don't know how i can make it simpler than this (you can run it in firebug). Works as expected in IE - all the textfields are same height. However, in FireFox, the height of the latest textfield is stretched. I don't understand why, and I don't want to have to resort to setting height explicitly to avoid this.

Thanks in advance!





new Ext.Window({
title: 'test'
, width: 400
, items:
[
{ // col 1
xtype: 'panel'
, border: false
, layout: 'form'
, labelWidth: 70
, defaultType: 'textfield'
, defaults: { anchor: '-25' }
, items:
[
{ name: 'Client_Company', fieldLabel: 'Company' }
, { name: 'Client_Contact', fieldLabel: 'Contact' }
, {
xtype: 'panel'
, fieldLabel: 'CRM ID'
, border: false
, layout: 'hbox'
, layoutConfig: { align: 'top', pack: 'start' }
, items:
[
{ xtype: 'textfield', name: 'Client_CRM_ID', flex: 1 }
, { xtype: 'panel', border: false, width: 5 } // spacer
, {
xtype: 'button'
, text: 'Resync from CRM'
, iconCls: 'icon-refresh'
}
] // eo items
} // eo hbox panel
] // eo items
}
]
}).show();

IvanJ
9 Mar 2011, 1:51 PM
Also I just realized that in Chrome, the boxes that are stretched out in IE, are actually shrunk... Am I doing something wrong?

IvanJ
10 Mar 2011, 8:11 AM
I just realized that if I try to run this example within a fresh ExtJS page (http://dev.sencha.com/deploy/dev/examples/grid/array-grid.html), the field heights are sized properly. That means something in my own page is causing this on FireFox...

Grr I wish for an efficient process of figuring that out.

IvanJ
10 Mar 2011, 9:14 AM
What do you know - the problem was that I had a doctype specified!

I tried all of the doctypes from this page: http://www.w3schools.com/tags/tag_doctype.asp

...and all of them produced the same error. Using no doctype at all eliminated the error.