issue with grid inside tab inside dialog

[bernieberg]

howdy,

I have what I believe to be two simple issues, but I have not been able to fix them.

1. I have a yui-ext grid inside a yui-ext tab that is inside a yui dialog. It seems to render fine, but it is not visable until I "restore" and then "maximize" my browser window (or some other similar action, opening and closing firebug will do it too).

2. If I activate a tab it seems to create a copy of that tab. If I click on it the extra tab seems to go away.

I am using an object I created to dynamicly create the tabs. I'm not sure if that has something to do with issue 2 or not. The code is rather long so I just threw up an example of the issue here:

http://dev.dakotanetwork.com/example/

If you would prefer I post all the code here let me know. Please excuse the slopy code, I am still getting a hang of doing this much heavy lifting in javascript.

Thanks!

[bernieberg]

regarding my first issue. I have found that if I get rid fo the overflow attributes for .ygrid-wrap and .ygrid-wrap-headers in grid.css that it render it visible. Obviously it also gets rid of the scroll bars, but perhaps this info can give a clue to what will fix this issue.

Thanks!

[jack.slocum]

This may seem silly, but try putting a width on the grid's container element. It is known to solve all kinds of browser rendering issues with the grid.

[bernieberg]

Jack,

Thanks for the suggestion. Unfortunately it doesn't seem to help. I have simplified my example and taken the tabs out of the dialog. It still has rendering issues.

http://dev.dakotanetwork.com/example/index2.php

Thanks for any other suggestions you can give.

[jack.slocum]

The problem is related to display:none. The grid does various calculations based on offsetWidth and offsetHeight. When elements have a display of none, these values are always 0. Inactive tab panel items have a display of none. When the window resizes the grid updates these calculations which is why a resize (after it is display:block) fixes the problem.

A solution may be to subscribe to onActivate and render the grid then (if it isn't already rendered).

If you come up with an alternate solution, please let me know.

[jack.slocum]

The "extra tab appearing mysteriously on render and disappearing when you clicked or resized window) issue that you were having, i finally duplicated it when creating the comments system on my blog. The problem was actually in Element. When you call setVisible (or show/hide) on an element, it first checked whether it was already shown/hidden, then if it was a change it updated it. The problem stemmed from trying to set an elements visibility property while it was in a parent with display none, it would itself have a display of none and therefore the visibility setting would get ignored. That check was removed and if you call setVisible,show or hide, it just sets the property regardless of the current state. That fixed the ghost tabs issue.

the fix will be in the next release.