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，一切都正常。当我添加它们时，它们会在 HorizontalPanel 下的 VerticalPanel 中居中，而不是与顶部对齐。复选框也是如此。

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

   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) 北部所有可用的 space。

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

见下文DOM结构：

注释掉带有 setHeight("100%") 的行，您将在下拉列表中直接看到您的复选框：

GWT VerticalPanel 在第一个小部件之后没有对齐到顶部

GWT VerticalPanel not aligning to top after first widget

javascript

java

html

css

gwt