第一个小部件后 GWT VerticalPanel 未与顶部对齐

Question

我正在尝试创建这样的 GWT 结构：

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

只要我忽略 TextAreas，一切都会正常工作。当我添加它们时，它们在 Horizo​​ntalPanel 下的 VerticalPanel 中居中，而不是与顶部对齐。复选框也一样。

如果我查看正在呈现的 HTML，我会在 Horizo​​ntalPanel 下看到填充。我试过了：

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

和

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

两者都没有做任何事情。我试过了：

   leftTopVerticalPanel.setVerticalAlignment(VerticalPanel.ALIGN_TOP);

这也没有做任何事情。我认为默认情况下添加到 VerticalPanel 的所有小部件都会继续与顶部对齐？有什么建议吗？

编辑：这是一张显示我的意思的图片。请注意，复选框位于下拉列表下方的中心，而不是直接位于下拉列表下方。当我调整分隔线时，复选框保持居中。

这是创建图像的代码：

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);

Answer 1

VerticalPanel (leftTopVerticalPanel) 被渲染为<table>。

您将其高度设置为 100%：

leftTopVerticalPanel.setHeight("100%");

这使它填满了SplitLayoutPanel (leftVerticalSplitPanel) 北部的所有可用空间。

所以<table> 被垂直拉伸，因此它的行也被均匀拉伸。

参见下面的 DOM 结构：

---

用setHeight("100%") 注释掉该行，您的复选框将直接位于下拉列表下方：