title: GWT: Help trying to format a composite widget. Tried CSS stuff and it has no effect
body: <p>Consider the following widget:</p>
  
  <pre><code>import com.google.gwt.user.client.ui.Composite;
  import com.google.gwt.user.client.ui.Label;
  import com.google.gwt.user.client.ui.ListBox;
  import com.google.gwt.user.client.ui.TextBox;
  import com.google.gwt.user.client.ui.HasHorizontalAlignment;
  import com.google.gwt.user.client.ui.HasVerticalAlignment;
  import com.google.gwt.user.client.ui.FlexTable;
  
  public class SelectorPanel extends Composite
  {
      private final FlexTable flexTable = new FlexTable();
      private final Label lbltitle = new Label("##Title");
      private final ListBox listBox = new ListBox();
      private final Label lblsearchtext = new Label( "##SearchText" );
      private final TextBox tbSearch = new TextBox();
  
      public SelectorPanel()
      {
          listBox.setVisibleItemCount( 10 );
          flexTable.setStyleName("SearchPanel");
          flexTable.setBorderWidth(0);
  
          initWidget( flexTable );
          flexTable.setSize("200px", "0px");
          lbltitle.setWordWrap( false );
  
          flexTable.setWidget( 0, 0, lbltitle );
  
          flexTable.setWidget( 1, 0, listBox );
          listBox.setWidth("100%");
  
          flexTable.setWidget( 2, 0, lblsearchtext );
          tbSearch.setMaxLength( 32 );
  
          flexTable.setWidget( 3, 0, tbSearch );
          flexTable.getCellFormatter().setHorizontalAlignment( 0, 0, HasHorizontalAlignment.ALIGN_LEFT );
          flexTable.getCellFormatter().setVerticalAlignment( 2, 0, HasVerticalAlignment.ALIGN_MIDDLE );
          flexTable.getCellFormatter().setVerticalAlignment( 1, 0, HasVerticalAlignment.ALIGN_MIDDLE );
          flexTable.getCellFormatter().setVerticalAlignment( 3, 0, HasVerticalAlignment.ALIGN_MIDDLE );
          flexTable.getCellFormatter().setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
          flexTable.getCellFormatter().setHorizontalAlignment(3, 0, HasHorizontalAlignment.ALIGN_CENTER);
      }
  
  }
  </code></pre>
  
  <p>I have tried messing with CSS spacing and padding (and I have no idea what the difference is) and it has no effect.  I can even change colors in the CSS tool and that too has no effect.</p>
  
  <p>Anyway, here are the problems with widget:</p>
  
  <ol>
  <li><p>The title text "##Title" is cut off by the list box below it.  I would like some spacing or padding below it so that doesn't happen.</p></li>
  <li><p>The ##SearchText label is too close to the listbox above it and also overlapped by the text box below it.</p></li>
  <li><p>Finally the whole thing appears at the extreme left on my browser and I would like a little spacing between it and the edge of the screen. </p></li>
  </ol>
  
  <p>I can 'kind of' format this by adjusting cell sizes and what not.  I can't get it right, only better. I am also thinking this must be the wrong way to go about it.</p>
  
  <p>When I look at the stockwatcher application they use CSS to do things like this, but I can't get anything to happen.  The following is my CSS file and the two items are just experimental and have no effect on anything.</p>
  
  <pre><code>Boxed {
      margin-top: auto;
      border: thin solid;
      background-color: Silver;
  }
  #test {
      margin-top: 20px;
      margin-bottom: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  </code></pre>
  
  <p>Is there anyone who can explain this to me?  I just do not understand why CSS has no effect or how to resolve the above problems.  I can apply the above CSS to the cells or to the labels or other UI objects and nothing happens.</p>