View Full Version : Issue with Card Layout, Absolute Layout, FormPanel & Column Layout

20 Feb 2011, 8:01 PM
Ext version tested:

Ext 3.2.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

### MAC ###
Google Chrome 9.0.597.102
FireFox 3.6.12 (firebug 1.6.0 installed)
Safari 5.0.3
### WINDOWS ###
Google Chrome 9.0.597.94
FireFox 3.6.3 (firebug 1.6.0 installed)
Safari 5.0.3
Internet Explorer 6.0.2900.5512.XPSP_SP3_gdr.100427-1636CO

Operating System:

Mac OS X 10.6.6
Windows XP SP3

Form Fields are not correctly laid out on inactive tabs when using the combination of layouts described below.

The project was created with ExtJS Designer
I have a window with its layout set to card.
There are 2 cards - Both Cards are identical (the 2nd card was created by duplicating the first in designer)
Both cards are Panels and both are set to a layout of absolute.
Within each Panel is a FormPanel - with its layout set to form, width set to 400, x set to 70, y set to 50 and labelAlign is set to top
Within the FormPanel is a FieldSet - its layout is set to column
Within the FieldSet are 2 Panels - their layout is set to form and the columnWidth is also set.
Within the 1st 'column' Panel (columnWidth is set to .75) there is a ComboBox and a TextField - both with their Anchor set to 100%
Within the 2nd 'column' Panel (columnWidth is set to .25) there is a TextField and a DateField - both with their Anchor set to 100%
Card 0 is set to be the active card.
When you open the web page in a browser and go to the card which was not set as the active card (card 1 in this case), neither the Form Fields nor the 'column' Panels layout with their correct widths.
It appears that setting the width configuration of the FormPanel is causing the issue. If left unset, the issue does not occur (but the FormPanel then overflows the right side of the window).
This issue can also be replicated by using CompositeFields instead of setting the setting the FieldSet's layout to column and using multiple Panels. In this case neither the width nor height of the FormFields are laid out correctly.

Test Case:

<<working code is posted at the URL below >>

See this URL : http://ccbdb.com/cardissue (http://ccbdb.com/cardissue/)

Steps to reproduce the problem:

from the URL above open the card0.html web page
the 1st card, card0, which was configured to be the initial active card, is shown as the active card and its FormFields are laid out correctly
click the 'Next Previous' button in the lower left of the bottom tool bar.
the 2nd card, card1, is now shown, and the Form Fields are not laid out correctly.

The result that was expected:

The layout of the 2nd card should have been identical to the layout of the 1st card

The result that occurs instead:

The layout of the 2nd card, did not have the proper widths (were too narrow) for the Form Fields and 'column' Panels.

Screenshot or Video:


Debugging already done:

By process of elimination and systematically removing the various configuration settings, I was able to determine that when I omitted the width setting of the FormPanel the Form Fields on the 2nd card would layout with their correct widths, however this would cause FormPanel to overflow on the right side of the window and not all of the form is visible and accessible.

Possible fix:

could not determine any possible fixes

21 Feb 2011, 6:13 AM
Don't know if this will solve the problem, but:
1. Configure the layout:'card' container with layoutConfig:{layoutOnCardChange:true}.
2. Configure the individual cards with hideMode:'offsets'.

21 Feb 2011, 8:31 PM
Well I set the hideMode: to 'offsets' as you suggested and that did resolve the issue, good call. I didn't try setting the layoutConfig as ExtJS Designer doesn't expose that.

Even though the above work around fixed the issue, I'd still consider it a bug. I mean, why does one need to change the hideMode to get this particular layout of panels to work properly.

Don't know if this will solve the problem, but:
1. Configure the layout:'card' container with layoutConfig:{layoutOnCardChange:true}.
2. Configure the individual cards with hideMode:'offsets'.

Here's a screen shot of the 2nd card in designer and it appears correctly here, so why do we need to change the hideMode and how does the hideMode affect the window/application? Why would one want to use something than the default value of 'display'?


I've even tried wrapping the form with another panel with a layout of fit, thinking that would help, but the bug is still an issue.

27 Feb 2011, 11:51 AM
So is this not being considered a bug?

If not a bug can someone please explain

1) the effect of using a hideMode of 'offsets' versus 'display' make a difference here and if in fact it should make a difference.

2) why designer is showing the layout correctly, but when the actual page is rendered its not laid out correct

-- Greg

27 Feb 2011, 7:04 PM
Well thanks, because setting hideMode to 'offsets' also worked for layout of a button group in a toolbar that was hidden in a card layout. Just hard to understand why.

27 Feb 2011, 11:45 PM
A little bit of background on this bug:

The standard way to hide components (like the cards in a tabpanel) is by using hideMode:'display', which sets the style to display:none. The problem with "display:none" is that some browsers are not able to do measurements inside a display:none element and will return zero for all widths and heights, which will break most layout calculations.

A different (but slower) way to hide components is by using hideMode:'offsets', which will set the visibility to hidden, position to absolute and top en left to -10000px. This often solves layout problems, but can have some width calculation problems of it's own, because of the position:absolute.

I don't think this problem is going to be solved in Ext 3.x.

Ext 4 has a completely reworked layout system and should suffer a lot less from this problem (but it still can if you render to an element that you manually set to display:none).

28 Feb 2011, 7:06 AM
Thanks for the background.

So its not really of 'bug' of Ext, but rather a limitation of some browsers... in fact, all browsers (that I tried) in this particular case with cards and the nested layouts and my use of a width on the container.