View Full Version : bottom-docked toolbars cut off for panels in vbox layouts

25 Jul 2011, 4:53 PM

Ext version tested:

Ext 4.0.2a

Browser versions tested against:

Chrome 12.0
Firefox 5.0


Toolbars docked to the bottom of a panel get cut off by the bottom of the container when in a vbox layout
This happens regardless of whether the panel size was specified by an explicit 'height' config option or a flex value

Steps to reproduce the problem:

Create a panel with a VBox layout
Add a child with flex 1 (this allows for testing the explicit height case)
Add a second child with a flex value or a height specified
Add a bottom-docked toolbar to the second child

The result that was expected:

Docked toolbar visible on bottom of container

The result that occurs instead:

Toolbar cut off by bottom of container and non-visible

Test Case:

//To be added - draws code from too many parts of app to cut and paste


Screenshot or Video:

attached screenshot, 'pre-resize', shows page footer - the left frame is a fixed height form under a grid with flex 1, with my afterrender hack applied. The right frame is a grid with flex 1, without the hack
attached screenshot, 'after-resize', shows the page footer after I pulled down the chrome debugger - you can see the right footer was rendered before but cut off by the page, and the left panel has the same space allocated where the toolbar was originally rendered before the afterrender event

Debugging already done:

removed custom CSS link and confirmed bug still occurs

Possible fix:

I have patched around this by wrapping the element of the desired overall height, then adding an afterrender listener to the component itself that sets its height to the height of its parent minus the height of the toolbar, although I doubt this is a particularly useful fix for the codebase itself.

Additional CSS used:

only default ext-all.css
custom css that implements background tweaks for grid cells and menu icons

Operating System:

Windows 7 x64