CODEWITHSUNDEEP
javagwt
Ashish
Ashish

Reputation: 14697

How to place element on Flowpanel in GWT

I am using ui binder to place elements on a GWT page but I am not able to place them correctly.As per my knowledge element in flow panel should appear in a horizontal line but they are appearing in a vertical line. 

<g:FlowPanel>
  <g:Label ui:field="searchLabel" text="{labels.searchFor}"> </g:Label>
  <g:ListBox ui:field="searchListBox"></g:ListBox>
</g:FlowPanel>
<g:SimplePanel addStyleNames="{cres.style.textAlignCenter}">
  <g:Button ui:field="searchButton" text="{clabels.search}"/>
</g:SimplePanel>

Upvotes: 1

Views: 3986

Answers (3)

Andrea Boscolo
Andrea Boscolo

Reputation: 3048

FlowPanel is just a (widget) wrapper around a simple div element. All the child widget will naturally flow as per the standard HTML behavior (i.e., block and inline elements are displayed as such).

On the contrary the Label widget is not a wrapper of an HTML label element. Again, is a div, so everything stacks up in your FlowPanel.

You can:

  • use an InlineLabel instead of a Label (will render as a span element);
  • use a float style on the Label or any other CSS trick to make two divs aligned horizontally;
  • use an HTMLPanel instead of a FlowPanel (they will behave the same), and lay out elements using also HTML for simple things like labels (i.e., mix and match HTML and Widgets inside it);
  • use an HorizontalPanel instead of a FlowPanel (but this will render as a table element, be warned).

Upvotes: 3

El Hoss
El Hoss

Reputation: 3832

The label is surrounded by a <div>-tag. Without a css style, every <div>-tag has a line break.

Use: 

searchLabel.getElement().getStyle().setFloat(Style.Float.LEFT);

to avoid the line break.

Upvotes: 0

Azeez
Azeez

Reputation: 328

Flow Panel working is some what strange. will not arrange all the Elements in the flow.Only for some Elements it will work as you expected.For example Buttons. In case of block level elements will be same as Vertical Panel.For example if you are inserting two Horizontal Panels in a Flow Panel it is same as insering in Vertical Panel. To achieve side by side arrangement you have to use CSS Float style.

Upvotes: 1

Related Questions