有没有一种方法可以使TabLayoutPanel动态地调整大小以适应其选项卡内容?
目前,当我不指定
目前,当我不指定
height
和width
时,我只能看到顶部的菜单,选项卡区域被压缩了。我创建了一个小的解决方法 - 在添加所有选项卡后,只需从选项卡容器中删除溢出即可。
// 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。
DecoratedTabPanel dtp = new DecoratedTabPanel();
dtp.add(widget, title)
dtp.selectTab(0);
您可以使用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;
}
不是自动的。您必须告诉TabLayoutPanel
应该有多大 - 或者让其父部件来做到这一点。它的子元素不能在没有自定义代码的情况下告诉它应该有多大。
DOM.setStyleAttribute(parent, "position", "relative");
- mji