CODEWITHSUNDEEP
javagwt
jldupont
jldupont

Reputation: 96716

TabLayoutPanel dynamic resizing?

Is there a way to get TabLayoutPanel to resize itself dynamically to it's tab content?

At the moment, I only see the menu at the top, the tab area been squashed, when I do not specify a height & width.

Upvotes: 3

Views: 2217

Answers (4)

Ben
Ben

Reputation: 6227

You could use DecoratedTabPanel instead, because it dynamically alters the size of the tabpanel according to its childs widgets. 

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

Upvotes: 1

Alexander Nikiforov
Alexander Nikiforov

Reputation: 21

You can use the DecoratedTabPanel instead. And no work around will be necessary

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

Upvotes: 1

Bogdan Sulima
Bogdan Sulima

Reputation: 427

I have created small workaround - i was enough to remove overflow from the tab container after adding all 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.: use PX units when creating TabLayoutPanel for compatibility with IE, otherwise tab navigation might be not visible.

Best regards

Bogdan.

Upvotes: 1

Riley Lark
Riley Lark

Reputation: 20890

Not automatically. You have to tell the TabLayoutPanel how big it should be - or have its parent widget do that. It's children cannot tell it how big to be without custom code.

Upvotes: 1

Related Questions