Search code examples
cssgwtcss-floatuibinder

How to make a layout in which certain tags will fill remaining space of parent tag/container?

I'm not very good at HTML/CSS terminology so please feel free to edit the question.

Could you guys please tell me how I can make certain fields/tags fill rest of available space allocated by parent tag ? Non-GWT, html+css example would be fine too.

Here is what I have

enter image description here

HTML code of this example is here (it's generated by GWT).

If I change size of the browser window border of fieldset changes too occupying whole area.

So the "requirements" are:

  • No fixed width values because I have several localized versions of the site.
  • First column with name of the field should be as wide as the longest name. It's "phone number" in my case but can be something else in other language.
  • Input tag should be left-aligned. Input tag should autosize to occupy space remaining within boundaries of parent tag.

UiBinder XML of PersonEditor control is

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:e='urn:import:com.google.gwt.editor.ui.client'

             ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
             ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
             ui:generateLocales="en,ru">
    <ui:style src="../common.css"/>
    <g:CaptionPanel ui:field="captionPanel">
        <g:Grid>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg meaning="person's name">Name:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg>Phone Number:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="phoneNumber" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg>EMail:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="email" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
        </g:Grid>
    </g:CaptionPanel>
</ui:UiBinder>

I don't provide XML for SenderOrganization because it's pretty much the same.

Solution

  • To make label column be autosizable you have to use table element. It looks like this:

    <!DOCTYPE HTML>
<html>
  <head>
    <style>
      table { width: 100%; } 
      th { text-align: left; font-weight: normal; white-space: nowrap; } 
      td {  width: 100%; } 
      input { width: 100%; }
    </style>
  </head>
  <body>
     <fieldset>
       <legend>Sender organization:</legend>

       <table>
         <tr>
           <th>Name:</td>
           <td><input></td>
         </tr>
         <tr>
           <th>Address:</td>
           <td><input></td>
         </tr>
       </table>

       <fieldset>
         <legend>Contact Person:</legend>

         <table>
           <tr>
             <th>Name:</td>
             <td><input></td>
           </tr>
           <tr>
             <th>Phone Number:</td>
             <td><input></td>
           </tr>
           <tr>
             <th>EMail:</td>
             <td><input></td>
           </tr>
         </table>

       </fieldset>

     </fieldset>
  </body>
</html>