CODEWITHSUNDEEP
gwtpanel
Dave
Dave

Reputation: 19090

GWT: How do I layout widgets horizontally?

I'm using GWT 2.4. I'm having trouble laying out widgets horizontally in a pane of my TabLayoutPanel. How do I lay out panels horizontally and then have the widgets wrap to the next line when there is no more visible room? Loosely, I create the TabLayoutPanel like so ...

tabsPanel = new TabLayoutPanel(BAR_HEIGHT_IN_EM, Style.Unit.EM);
for (final Node tabNode : documentNode.getChildren()) {
    final ScrollPanel scrollPanel = new ScrollPanel();
    ...
    Widget childWidget = createPanelFromWidgets(childWidgets);
    ...
    scrollPanel.add(childWidget);
    tabsPanel.add(scrollPanel, tabName);
}


public static Widget createPanelFromWidgets(final List<Widget> childWidgets) { 
    final FlowPanel horizPanel = new FlowPanel();
    for (final Widget childWidget : childWidgets) { 
        horizPanel.add(childWidget);
    }   // for
    return horizPanel;
}   // createPanelFromWidgets

Any ideas where I'm going wrong? I thought the documentation () says things would be automatically laid out horizontally, but I'm seeing everything laid out vertically.

PS - HorizontalPanel isn't an option because I want my elements to wrap when there is no more visible area.

Upvotes: 2

Views: 5219

Answers (1)

Eric
Eric

Reputation: 471

When you put objects in a FlowPanel you get the default HTML layout behavior, not necessarily a horizontal layout. If you check the styling of your widgets using firebug or something similar, they probably use "display: block;" (most do). With a block display, they appear vertically.

If you change the CSS display attribute of each childWidget to "inline-block" or "inline", they should align horizontally and also wrap.

Upvotes: 5

Related Questions