GWT composite dynamic height resize

Question

I Have a GWT Composite to which some other Composites are added dynamically. I want to make may Parent composite Resize to fit the height of all its child widgets automatically. i tried setting setHeight("100%") for Composite but this doesn’t work. any Idea how to accomplish this functionality?

thanks. EDIT:

final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
    dockLayoutPanel.setStyleName("EntryPanel");
    dockLayoutPanel.setSize("142px", "72px");
    initWidget(dockLayoutPanel);

    final VerticalPanel panel = new VerticalPanel();
    panel.setSize("140px", "72px");

    chckbxExport = new CheckBox("Export");
    putField(CommonPresenter.CONSTANTS.EXPORT, chckbxExport);

    dateBox = new DateBox();

    dateBox.addValueChangeHandler(new ValueChangeHandler<Date>() {
        @Override
        public void onValueChange(final ValueChangeEvent<Date> event) {
            dateChanged = true;
        }
    });

    panel.add(dateBox);

    final ListBox visibility = new ListBox();

    final Label lblVisibility = new Label("Visibility:");
    LabeledWidget vis = new LabeledWidget(lblVisibility, visibility);

    for (int i = 0; i < CommonPresenter.CONSTANTS.VISIBILITIES.length; i++) {
        visibility.addItem(CommonPresenter.CONSTANTS.VISIBILITIES[i]);
    }

    putField(CommonPresenter.CONSTANTS.VISIBILITY, visibility);

    panel.add(vis);
    panel.add(chckbxExport);

    dockLayoutPanel.add(panel);

UPDATE: Setting Composite width to fill all available Window horizontal space:

 final int scrollBarWidth = 25;
// editPanel.setHeight("180px");
setWidth(Window.getClientWidth() - scrollBarWidth + "px");
// editPanel.setStyleName("EditorPanel");

Window.addResizeHandler(new ResizeHandler()
{
  public void onResize(ResizeEvent event)
  {
    int width = event.getWidth();
    setWidth(width - scrollBarWidth + "px");
  }
});

Answer 1

Here's how to do it generally with HTML+CSS:

• Create the parent, and do not set its height (or set it to auto).
• Then add the children (just make sure, that you don't use absolute/fixed positioning for the children).
• Set the height of the children, if required.

The height of the parent will then be adjusted automatically. This is the same for GWT Composites - just make sure, which CSS (including style attributes) applies to your elements! If unsure, use Firebug.

If you need more specifics, then you'd have to post some code which shows how you construct the parent composite (UiBinder, ...?)

Answer 2

Instead of using "100%" you can get the actual height by Window#getClientHeight(). To handle scenarios where the user resizes the browser, you can use a ResizeHandler.

Answer 3

Try Overriding the Resize()(Your class must extend to ResizeComposite). In this re-size method set the size you want.

This works you dynamically because every time the window is re-sized this method is called and the values are set accordingly.