GWT：如何反转垂直面板按钮

Question

我有一个包含一组按钮的垂直面板。单击基本按钮时，面板会展开并显示作为垂直面板一部分的按钮组。由于此基本按钮位于hte UI的底部，因此我对CSS进行了更改，以使展开的按钮显示为向上而不是向下。然而，似乎页面在展开状态下向下扩展，这导致在页面上添加滚动，这是完全不合需要的。

有没有办法将按钮添加到构建（倒置）而不是构建的垂直面板？我真的不想以不同的顺序添加按钮，然后如果可能的话再次使用CSS。感谢您的提示。

Answer 1

just invert the direction并不容易，因为我的理解是您希望按钮面板浮动在现有页面的顶部。网页遵循流程结构，除非您指定，否则不会堆叠。

您可能需要将整个布局更改为绝对面板，或使用CSS（正如您所说，您不希望这样做，但这比前者更容易），因此您可以将面板放在任何您想要的位置。

CSS：

.button-panel{
    clip: rect(auto, auto, auto, auto);
    position: absolute;
    left: 100px;
    top: 319px;
    overflow: visible;
}

爪哇：

YourVerticalPanel.addStyleName("button-panel");

Answer 2

VerticalPanel是布局的错误小部件。你应该使用PopupPanel和一个非常简单的CSS。当用户按下按钮时，通过调用.showRelativeTo（）方法显示此PopupPanel。它将为您完成所有计算，并根据浏览器窗口大小和按钮位置向下或向上显示。

在PopupPanel中添加FlowPanel，然后将按钮添加到此FlowPanel。将此样式应用于FlowPanel：

.menu {
    width: 100px;
}
.menu input {
    float: left;
    margin-top: 10px;
    width: 100px;
}