I have a container (colored blue in the picture below) which contains a fixed size child (colored red).
I want the container to derive its size from its child rather than expand to fill the table cell that it itself is contained by.
This code shows the case where the container expands to fill the cell that contains it...
This results in a the following layout:
public class Demo extends LayoutContainer implements EntryPoint
public void onModuleLoad()
protected void onRender(Element parent, int index)
LayoutContainer panel1 = new LayoutContainer();
LayoutContainer fixedSizeChild = new LayoutContainer();
fixedSizeChild.add(new Label("fixed size child"));
LayoutContainer panel2 = new LayoutContainer();
However I don't want the container (blue) to expand to fill the cell (imagine it was a ContentPanel - I don't want the header etc. stretching out to the right of the child content).
I looked at the HTML generated and it seemed the issue was that the container is a <div> element, if it were a <span> element then it wouldn't expand like this (please correct me if there's more to this?).
I found I could achieve the affect I wanted by replacing the line "add(panel1);" in the code above with...
This results in what I want - the container is no bigger than its child:
HtmlContainer htmlContainer = new HtmlContainer("<table cellspacing='0'><tr><td id='foo'></td></tr></table>");
Why do I want this? In this example I've used LayoutContainer instances for the simplest possible demonstration but in my application I have lots of ContentPanel instances. At the moment I set an explicit size for each, usually this involves manually totaling up the widths and margins etc. of all the child elements and setting the size of the containing ContentPanel accordingly, whereas I'd rather this happened automatically.
It seems I can achieve this using HtmlContainer but I can't help wondering if there's a more obvious standard way to achieve this as it seems like a pretty standard thing to want and it seems odd to have to specify custom (if still pretty simple) HTML to achieve it.
I guess people commonly set the size of a container and then specify a layout that causes the children to be sized such that they fill out this size nicely, but in many situations I'd rather work the other way around, i.e. set sizes for the children (and still provide a layout of course) and let the container's size be derived from this.
Any pointers to the proper approach would be welcome