Re: liquid layout with UIBinder

More like

<g:LayoutPanel>

  <g:layer top="0" height="60px" ... >

    <g:FlowPanel>

      <g:Label text="Name:"/>

      <g:TextArea/> 

      <g:Label text="Description:"/> 

    </g:FlowPanel>

  </g:layer>

  <g:layer top="61" bottom="0" ... >

   <g:TextArea/> 

  </g:layer>

</g:LayoutPanel>

which in turn would be pretty much the same as

 <g:DockLayoutPanel unit="PX"> 

      <g:north size="60"> 

        <g:FlowPanel>

           <g:Label text="Name:"/>

           <g:TextArea /> 

           <g:Label text="Description:"/> 

         </g:FlowPanel>

      </g:north> 
      <g:center> 
          <g:TextArea characterWidth="60"/> 
      </g:center> 
  </g:DockLayoutPanel> 

Or the same using HeaderPanel:

  <g:HeaderPanel> 

        <g:FlowPanel>

            <g:Label text="Name:"/>

            <g:TextArea /> 

            <g:Label text="Description:"/> 

         </g:FlowPanel>

         <g:TextArea characterWidth="60" height:"100%" /> 
  </g:HeaderPanel > 

HeaderPanel calculates the height of the header widget on the fly so you don't have to set it manually.

You could also use VerticalPanel (although you would then use tables for layout which is bad practice):

<g:VerticalPanel>

  <g:FlowPanel>

    <g:Label text="Name:"/>

    <g:TextArea /> 

    <g:Label text="Description:"/> 

  </g:FlowPanel>

  <g:cell height="100%"> // should shrink the above FlowPanel cell to its minimum required size

    <g:TextArea height="100%" />

   <g:cell />

</g:VerticalPanel>

Or you just use plain HTML + CSS but I think you will write something very similar in pure HTML like the above examples if you need a wider range of browser support. The challenge is to vertically stretch a child element inside a container that has more than one child without overflowing the container. In older browsers this only works by using absolute positioning, tables or divs acting like tables.

In modern browsers you can also use the new flexible boxes model which allows you to define remaining space:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://caniuse.com/#search=flex

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.