TabLayoutPanel动态调整大小？

Question

有没有一种方法可以使TabLayoutPanel动态地调整大小以适应其选项卡内容？

目前，当我不指定height和width时，我只能看到顶部的菜单，选项卡区域被压缩了。

- jldupont

Answer 1

我创建了一个小的解决方法 - 在添加所有选项卡后，只需从选项卡容器中删除溢出即可。

    // Tabs are hidden because of overflow setting. Remove overflow &
    // relative positioning from the tab widget.
    for (int i = 0; i < tabLayout.getWidgetCount(); i++) {
        final Widget widget = tabLayout.getWidget(i);
        DOM.setStyleAttribute(widget.getElement(), "position", "relative");

        final Element parent = DOM.getParent(widget.getElement());
        DOM.setStyleAttribute(parent, "overflowX", "visible");
        DOM.setStyleAttribute(parent, "overflowY", "visible");
    }

PS：在创建 TabLayoutPanel 时，请使用 PX 单位以确保与 IE 兼容性，否则可能无法看到选项卡导航。

此致

敬礼

Bogdan。

- Bogdan Sulima

---

谢谢Bogdan！它起作用了！但是我已经在我的代码中添加了以下行：DOM.setStyleAttribute(parent, "position", "relative"); - mji

Answer 2

您可以使用DecoratedTabPanel，因为它根据其子部件动态改变选项卡面板的大小。

DecoratedTabPanel dtp = new DecoratedTabPanel();
dtp.add(widget, title)
dtp.selectTab(0);

- Ben

Answer 3

您可以使用DecoratedTabPanel。不需要任何解决方法。

Java ...

VerticalPanel tab1 = new VerticalPanel();
VerticalPanel tab2 = new VerticalPanel();
VerticalPanel tab3 = new VerticalPanel();

DecoratedTabPanel tabPanel = new DecoratedTabPanel();
tabPanel.add(tab1);
tabPanel.add(tab2);
tabPanel.add(tab3);

...

CSS

.gwt-DecoratedTabBar {
    padding-top: 4px;
    padding-right: 14px;
    padding-left: 4px;
    padding-bottom: 0;
    cursor: default;
    color: #7a7a7a;
    font-weight: bold;
    text-align: center;
    background: #fafafa;
}

/** The tab bar items the users click on*/
.gwt-DecoratedTabBar .gwt-TabBarItem {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    background: #fff;
    color: #7a7a7a;
    margin-right: 3px;
}

/** The tab bar items the users click on - selected version*/
.gwt-DecoratedTabBar .gwt-TabBarItem-selected {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    background: #1d6bbb;
    color: #fff;
}

/** the body of the tab*/
.gwt-TabPanelBottom {
    border-top: 3px solid #1d6bbb;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

    padding: 6px;
    background: #fff;
}

- Alexander Nikiforov

Answer 4

不是自动的。您必须告诉TabLayoutPanel应该有多大 - 或者让其父部件来做到这一点。它的子元素不能在没有自定义代码的情况下告诉它应该有多大。

- Riley Lark