Question

I’m using GWT 2.4. I’m trying to create a tabs panel that has multiple tabs, so many that sometimes they exceed the allotted horizontal boundaries. How can I make a horizontal scroll bar appear? Here is how I’m creating my tabs panel now …

        tabsPanel = new TabLayoutPanel(BAR_HEIGHT_IN_EM, Style.Unit.EM);

        final List<ScrollPanel> tabs = new ArrayList<ScrollPanel>();
        for (final Node tabNode : documentNode.getChildren()) {

            // Get the tab's child widgets and add them
            // into the tab panel.
            final ScrollPanel childpanel = new ScrollPanel();
            childpanel.setHeight(SCROLL_PANEL_HEIGHT_PCT);
            ...
            tabsPanel.add(childpanel, tabName);
        }   // for

        tabsPanel.setWidth("100%");
        tabsPanel.setHeight("100%");

As you can see, I tried width=”100%”, but no scroll panels appear that allow me to see the excess tabs.

Thanks, – Dave

Answer 1

There is no built in way to do this with the TabLayoutPanel, but looking at it’s code it is possible to do this:

SimplePanel tab = (SimplePanel) getTabWidget(0).getParent();
FlowPanel tabBar = (FlowPanel) tab.getParent();
LayoutPanel container = (LayoutPanel) tabBar.getParent();

Element tabBarContainerLayer = container.getWidgetContainerElement(tabBar);
tabBarContainerLayer.getStyle().clearOverflowX();

DISCLAIMER: untested