Vaadin - How to limit component squishiness and overlap?

Question

Vaadin 7.6.2

Consider this example:

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 );
    }
}

When the browser window is contracted you will see that Field2 really squishes Field1 (captions overlapping, in-fact, if Field2 width was even wider, it would squish Field1 completely making it vanish by ultimately overlapping it).

How may I apply a minimum width to a TextField to limit the squishing AND prevent the eventual overlap?

Answer 1

I tried your example and played a bit with CSS. Looking at the HTML that Vaadin is generating, you have a structure like

<div style="v-horizontallayout ...">
 <div style="v-expand">
  <div style="v-slot">
    ...
      <input .../>
    ...
  </div>
 </div>
</div>

Setting min-width directly to the field did not work. However, putting the min-width CSS property on "v-slot" element worked for me, I tested with style:

.v-horizontallayout .v-slot {
    min-width: 150px;
}

To solve styling problems like this, I think it's handy to change styles inplace with Firefox built-in development tools or Firebug plugin until you have the desired effect and apply it to your CSS/SCSS file afterwards.