Question

我有一个TabLayoutPanel，我不想像下面的代码示例（tabPanel.setHeight("100px");）那样给它一个固定的高度。我想给它标签内容的高度，例如第一个选项卡中的HTML-Widget）。如果我没有手动设置高度，则根本不显示选项卡内容。有没有办法让这个工作的高度适应内容？

public class GWTTest implements EntryPoint {

    public void onModuleLoad() {
        TabLayoutPanel tabPanel = new TabLayoutPanel(3, Unit.EM);

        tabPanel.setAnimationDuration(400);
        tabPanel.add(new HTML("Tab1 Content"), "Tab 1");

        tabPanel.add(new HTML("Tab2 Content"), "Tab 2");

        tabPanel.setHeight("100px");

        RootPanel.get().add(tabPanel);

    }
}

我还尝试使用“overflow”和“postition”-attributes直接在css中乱七八糟，但这会打破动画或其他内容。

编辑：最简单的方法是实现我自己的标签面板 - 或使用现有的JavaScript库。

Answer 1

布局面板是GWT中一种特殊的容器，需要父母的尺寸，并且可以自行调整尺寸。基础是两个接口ProvidesResize和RequiresResize - 表示对象将调整其子项的大小，另一个是在父项大小更改时必须调整大小。大多数布局面板（如TabLayoutPanel）都实现了 - 它需要从其父级更改大小，当它获取大小时，它将调整其子项，每个选项卡的大小。

尽管如此，您需要将根小部件添加到RootLayoutPanel，而不是RootPanel。有几个主要区别 - 只有一个RootLayoutPanel（没有get(String)方法），RootLayoutPanel将调整其子项的大小，而RootPanel则不会。

使用RootLayoutPanel.get().add(tabPanel)代替RootPanel.get().add(tabPanel)。

Answer 2

我也遇到过这个问题，但遗憾的是它需要设置高度。所有的解决方法都是失败的。但其中一些建议如下。

您可以尝试将TabLayoutPanel替换为HeaderPanel：

包含标题（顶部），页脚（底部）和内容的面板（中）区。页眉和页脚区域自然调整大小。该内容区域分配了所有剩余空间页眉和页脚区域。

或者，您可以覆盖onResize()方法ResizeLayoutPanel计算嵌入内容的高度并设置适当的高度。

如果您想要滚动功能，则必须将VerticalPanel嵌入ScrollPanel或使用CSS设置oferflow属性。

GWT TabLayoutPanel - 动态高度？

2 个答案: