title: Vaadin - How to limit component squishiness and overlap?
body: <p>Vaadin 7.6.2</p>
  
  <p>Consider this example:</p>
  
  <pre><code>import com.vaadin.ui.HorizontalLayout;
  import com.vaadin.ui.Panel;
  import com.vaadin.ui.TextField;
  
  public class MyClass extends Panel {
  
      TextField        myField  = new TextField();
      TextField        myField2 = new TextField();
      HorizontalLayout hLayout  = new HorizontalLayout();
  
      public MyClass() {
          super();
          applySettings();
      }
  
      private void applySettings() {
  
          myField.setCaption( "Field1" );
          myField.setWidth( 100, Unit.PERCENTAGE );
  
          myField2.setCaption( "Field2" );
          myField2.setWidth( 25, Unit.EM );
  
          hLayout.addComponents( myField, myField2 );
          hLayout.setExpandRatio( myField, 1 );
          hLayout.setWidth( 100, Unit.PERCENTAGE );
          hLayout.setSpacing( true );
          hLayout.setMargin( true );
  
          this.setContent( hLayout );
      }
  }
  </code></pre>
  
  <p>When the browser window is contracted you will see that <strong>Field2</strong> really <em>squishes</em> <strong>Field1</strong> (captions overlapping, in-fact, if Field2 width was even wider, it would squish Field1 completely making it vanish by ultimately overlapping it).</p>
  
  <p>How may I apply a minimum width to a TextField to limit the squishing AND prevent the eventual overlap?</p>