Search code examples
javascriptjavahtmlcssgwt

GWT VerticalPanel not aligning to top after first widget

I'm trying to create a GWT structure like this:

   * RootLayoutPanel
   * --FlowPanel
   * ----VerticalSplitPanel left 
   * ------VerticalPanel top 
   * --------HorizontalPanel top 
   * ----------ListBox top 
   * --------TextArea top 
   * ------VerticalPanel bottom 
   * --------HorizontalPanel bottom 
   * ----------ListBox bottom 
   * --------TextArea bottom

Everything works correctly as long as I leave out the TextAreas. When I add them, they get centered in the VerticalPanel under the HorizontalPanel instead of aligning to the top. Same thing for checkboxes.

If I look at the HTML being rendered, I see padding under the HorizontalPanel. I have tried:

   leftTopHorizontalPanel.getElement().getStyle().setPadding(0,Unit.PX);

and

   leftTopTextArea.getElement().getStyle().setPadding(0,Unit.PX);

neither of which did anything. I have tried:

   leftTopVerticalPanel.setVerticalAlignment(VerticalPanel.ALIGN_TOP);

which also did nothing. I thought all widgets added to a VerticalPanel will continue to align to the top by default? Suggestions?

EDIT: Here is an image showing what I mean. Note the checkbox is centered below the dropdown instead of directly under it. When I adjust the divider, the checkbox stays centered.

enter image description here

Here is the code that creates the image:

private FlowPanel createWatchlistsTab() {
    // FlowPanel will wrap its children as its width resizes with the window
    final FlowPanel flowPanel = new FlowPanel();

    // *********************** LEFT VERTICAL SPLIT PANEL ***************************
    SplitLayoutPanel leftVerticalSplitPanel = new SplitLayoutPanel();
    leftVerticalSplitPanel.setSize("30%", "600px");

    // SplitLayoutPanels render as a div. Divs are block elements which always start on a new line.
    // Hence they won't wrap in the FlowPanel unless you make them inline-block, as below.
    leftVerticalSplitPanel.getElement().getStyle().setDisplay(Display.INLINE_BLOCK);

    // create the toolbar at the top of the left VerticalSplitPanel
    HorizontalPanel leftTopHorizontalPanel = new HorizontalPanel();
    leftTopHorizontalPanel.setWidth("100%");
    leftTopHorizontalPanel.setHeight("25px");
    // leftTopHorizontalPanel.getElement().getStyle().setPadding(0,Unit.PX);

    // create a ListBox, add items, then add it to the HorizontalPanel
    ListBox watchlistDropDown = new ListBox();
    watchlistDropDown.addItem("My Portfolio");
    watchlistDropDown.addItem("Buy Watch");
    leftTopHorizontalPanel.add(watchlistDropDown);

    // create dummy TextArea to be added to the VerticalPanel under the ToolBar
    TextArea leftTopTextArea = new TextArea();
    leftTopTextArea.setWidth("98%");
    leftTopTextArea.setHeight("100%");
    leftTopTextArea.setText("dummy text to show left top widget");
    leftTopTextArea.getElement().getStyle().setPadding(0, Unit.PX);

    // create a VerticalPanel and add the HorizontalPanel and TextArea
    VerticalPanel leftTopVerticalPanel = new VerticalPanel();
    // leftTopVerticalPanel.setVerticalAlignment(VerticalPanel.ALIGN_TOP);
    leftTopVerticalPanel.setWidth("100%");
    leftTopVerticalPanel.setHeight("100%");
    leftTopVerticalPanel.add(leftTopHorizontalPanel);
    CheckBox cb = new CheckBox("checkbox");
    leftTopVerticalPanel.add(cb);
    // leftTopVerticalPanel.add(leftTopTextArea);

    // add the VerticalPanel to the left top SplitPanel
    leftVerticalSplitPanel.addNorth(leftTopVerticalPanel, 200);
    int minWidth = 200;
    // leftVerticalSplitPanel.setWidgetMinSize(leftTopVerticalPanel, minWidth);
    leftVerticalSplitPanel.setWidgetMinSize(leftTopVerticalPanel, minWidth);

    // add notes TextArea to left bottom VerticalSplitPanel
    TextArea leftBottomTextArea = new TextArea();
    leftBottomTextArea.setWidth("98%");
    leftBottomTextArea.setHeight("100%");
    leftBottomTextArea.setText("dummy text to show left bottom widget");
    leftVerticalSplitPanel.add(leftBottomTextArea);

    // add the left VerticalSplitPanel to the FlowPanel
    flowPanel.add(leftVerticalSplitPanel);
Solution

  • VerticalPanel (leftTopVerticalPanel) is rendered as a <table>.

    You set its height to 100%:

    leftTopVerticalPanel.setHeight("100%");

    which makes it to fill all the available space in the north of the SplitLayoutPanel (leftVerticalSplitPanel).

    So the <table> is stretched vertically and thus its rows are also stretched evenly.

    See below DOM structure:

    DOM

    Comment out the line with setHeight("100%") and you will have your checkbox directly under dropdown:

    outcome