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