View Full Version : Form fields disappears when not enough space to render (IE)

22 Apr 2010, 7:51 PM

I have a form with several fields, it works just fine. But when we make browser (IE6) window less than it's necessary to fit the fields - fields just disappears, until window's width is expanded to the minimal field width.

I'm pretty sure that it's a common trouble but cannot find any proper solution.

this is the sample code to reproduce:

var issueForm = new Ext.form.FormPanel({
region: 'center',
autoScroll: true,

padding: 10,
title: 'Title',

labelWidth: 150,

items: [
{ width: 600, xtype: 'textfield', fieldLabel: '?', name: 'Id', value: 'zzz', readOnly: true }

var viewport = new Ext.Viewport({
layout: 'border',
items: [issueForm]

22 Apr 2010, 9:07 PM

IE6 can be a bit troublesome.

Try this in the form config parameters.

bodyStyle : Ext.isIE
? 'padding: 0 0 5px 5px;'
: 'padding: 0px 0px;',
You may also need to set the form width to the minimum width of the longest label lengths / field widths, or call doLayout() on a show().


22 Apr 2010, 9:17 PM
I had solved the problem with wrapping issueForm with another panel, which autoScroll property was specified as true

in some kind of this:

var items = [
region: 'center',
autoScroll: true,
items: [issueForm]