View Full Version : [2.0b1] TabPanel does not handle its child Components using hideMode:'visibility'

24 Oct 2007, 12:56 AM
I use hideMode:visibility for my Panels to avoid sizing issues.

TabPanel assumes that hiding inactive child Components removes them from the layout, and so the active one will be visible. This is not the case if the other Components are merely visibility:'hidden'

The TabPanel body should get position:relative.

There are 2 ocurrences of the selector ".x-tab-panel-body" in tabs.css, so there should be a single one reading:

.x-tab-panel-body {
border: 1px solid #8db2e3;

So then there should be a rule:

.x-tab-panel-body > .x-panel {
position: absolute;
top: 0px;
left: 0px;

This would ensure correct positioning of child Panels.

Assuming the ">" operator works cross browser (I don't think it does in IE6). If not, the TabPanel will have to manually set the style of its child elements that way.

24 Oct 2007, 7:51 AM
That setting breaks hideMode:'offsets' which I've switched to using now. It handles the measuring, and hidden Panels don't show up in the TabPanel.

I think the issue needs sorting out though. hideMode:'visibility' should work with TabPanel items.

28 Oct 2007, 7:14 PM
Thank for posting Animal. We'll take a look to see what can be done about it.

29 Oct 2007, 6:58 AM
Thanks for taking this up Saki.

It seems like you must be swamped right now, but there's also the matter of animShow doing this:

this.el.setStyle('display', 'none');

Which stomps on any hideMode specified...

13 Nov 2007, 6:35 AM
The display none call is required for FF Mac scrollbars and other issues. There are many places it is temporarily set. hideMode doesn't mean display:none will never be set, it just won't be the permanent state (so layout calls won't bomb).

hideMode visibility isn't a valid way to hide in TabPanel. Think about what is being set - "hide it but still take up space". That is exactly the behavior you are seeing, so I wouldn't classify that as a bug.