TabLayoutPanel动态调整大小？

问题描述：

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

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

答

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

答

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

// 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单元，否则标签导航可能不可见。

致以问候

波格丹。

谢谢Bogdan！有用！但我在代码中添加了以下代码：'DOM.setStyleAttribute（parent，“position”，“relative”）;' – mji

答

您可以改为使用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; 
}

DecoratedTabPanel仅适用于怪癖模式。 –

答

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

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

TabLayoutPanel动态调整大小？

相关推荐