TabLayoutPanel动态调整大小？

Question

有没有办法让TabLayoutPanel动态调整自己的标签内容？

此刻，我只看到顶部的菜单，选项卡区域被压扁，当时我没有指定height & width。

Answer 1

不自动。你必须告诉TabLayoutPanel它应该有多大 - 或者让它的父窗口部件这样做。如果没有自定义代码，孩子们不能告诉它有多大。

Answer 2

我已经创建了一个小的解决方法 - 我已经足以在添加所有选项卡后删除选项卡容器中的溢出。

// 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以便与IE兼容时使用PX单元，否则标签导航可能不可见。

致以问候

波格丹。

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

Answer 4

你可以使用DecoratedTabPanel代替，因为它动态地改变大小根据其孩子小部件的tabpanel。

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