Search code examples
gwtuibinder

How to use FlexTable with UiBinder?

I want to create this simple static layout:

enter image description here

but unfortunately I cannot find a description on how to do that with a FlexTable (or something else). This can't be done with a simple Vertical* or HorizontalPanel since the alignment of the labels and textboxes would not be correct that way.

Is there a way to do something like this in the UiBinder:

<x:TableView>
  <x:TableRow>
    <x:TableCell><g:Label ../></xTableCell>
    <x:TableCell><g:TextBox ../></xTableCell>
  </x:TableRow>
  <x:TableRow>
    <x:TableCell><g:Label ../></xTableCell>
    <x:TableCell><g:TextBox ../></xTableCell>
  </x:TableRow>
  <x:TableRow>
    <x:TableCell><g:Label ../></xTableCell>
    <x:TableCell><g:CheckBox../><g:CheckBox../> .. </xTableCell>
  </x:TableRow>
</x:TableView>
Solution

  • Just use a <table> in a <g:HTMLPanel>, or probably better, use <div>s with CSS (flexbox comes to mind).

    <table>
  <tr>
    <td><label>…</label></td>
    <td><g:TextBox/></td>
  </tr>
  <tr>
    <td><label>…</label></td>
    <td><g:TextArea/></td>
  </tr>
  <tr>
    <td><label>…</label></td>
    <td><g:CheckBox/><g:CheckBox/>…</td>
  </tr>
</table>