Dynamically resizing TabLayoutPanel?

Question

Is there a way to get TabLayoutPanel to dynamically resize the contents of the tab?

At the moment, I see only the menu at the top, the tab area is crushed when I do not specify heightand width.

Answer 1

Not automatically. You must say TabLayoutPanelhow much it should be - or have its parent widget. These children cannot say how big they can be without a special code.

Answer 2

I created a small workaround - it was enough for me to remove the overflow from the tab container after adding all the tabs.

    // 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: PX TabLayoutPanel IE, .

.

Answer 3

You can use DecoratedTabPanel instead. And no work around is required

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

Instead, you can use the DecoratedTabPanel as it dynamically resizes the tab to fit its child widgets.

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