Nested Grid Panels

Question

Hello,
I'm trying to center my website and the only way i though i could do this was to put all my components into some sort of table or something, and since JSC does not support colspans and rowspans, i had to make do with nested Grid Panels. Boy, was i in for a heck of a time.
After a few hours of fudging i finally got the layout i wanted, in Design Mode that is. When i deployed it to the App Server 8 and viewed it in IE, the final result was not rendered the same as what i had in design mode. For instance, i had a nested grid panel which contained a button and an empty grid panel. The empty grid panel was basically used to offset the button in a certain direction for better placement (if there is a better way, pls tell me!). Anyway when deployed, this was not rendered properly such that the empty grid panel was not included - the button was centered in the parent grid panel rather than offset to the right (the way i wanted it).
Another thing which didn't work were some of my image components. Some loaded their images correctly and some others did not - they were blank and had a red cross in the corner.
Is there a known issue with nested grid panels? I had quite a few levels of nests so maybe the browsers did not like this? Thanks a lot.
Mitch_J.

Answer 1

Let me try to clarify what you're seeing here.
The grid panel component is really intended as a -container- component. In particular, at runtime, if the grid panel has zero components as children, it will take up -zero- space. It might render an empty <table> tag, or it might render nothing - I can't remember what's in the component renderer logic. But the end result is the same: You shouldn't use an empty grid panel component as a "spacing" component.
Why does it work in the designer then, you're asking?
That's deliberate designtime behavior to make it easier to work with the component. Let's say you want to drop a grid panel compoent, and then put a button or two in it. First you drop the grid panel. Uh oh - if the designer renders it the same way as it will be at runtime, the grid panel will have size 0,0 (or maybe even be invisible) and you (a) don't see it, and (b) can't drop on it in the designer. (As a workaround, you -can- drop on it in the Outline, but still, this is not what users expect at designtime).,
So, the component designtime renderer will enforce a minium size on the component for the specific case that the component is empty or invisible, forcing a small border on the component, such that it's easily visible and easily a drop target.
If you want a spacing component, try a Static Text for example, with some space characters in it.
-- Tor
http://blogs.sun.com/tor