Height HoritonzalLayout

General
1

Hello,

I create a horizontal layout that has 3 components inside. I put its height to 60px. Why the horizontal layout has more than 60px? After the horizontal layout I put a TextArea, but appears very down.

Should appears exactly under the horizontal layout, how can I do it?


public class ProveedoresView extends VerticalLayout {
    
    private Select mercados;
    private Select proveedores;
    private Button anadirProveedor;
    
    public ProveedoresView() {
        setMargin(true);
        setSizeFull();
        
        HorizontalLayout hl = new HorizontalLayout();        
        mercados = new Select("Mercados");
        mercados.setStyleName("mercados");
        mercados.setItemCaptionMode(Select.ITEM_CAPTION_MODE_PROPERTY);
        mercados.setItemCaptionPropertyId("nombre");
        mercados.setNullSelectionAllowed(false);
        hl.addComponent(mercados);
        
        proveedores = new Select("Proveedores");
        proveedores.setItemCaptionMode(Select.ITEM_CAPTION_MODE_PROPERTY);
        proveedores.setItemCaptionPropertyId("nombre");
        proveedores.setNullSelectionAllowed(false);
        proveedores.setEnabled(false);        
        hl.addComponent(proveedores);
        
        anadirProveedor = new Button("+");
        anadirProveedor.setStyleName("anadir");
        anadirProveedor.setEnabled(false);
        hl.addComponent(anadirProveedor);
        
        hl.setHeight("60px");
        addComponent(hl);
        
        TextArea script = new TextArea("Script");
        script.setWidth("100%");
        script.setHeight("100%");
        addComponent(script);
    }
}
2

You probably want to use expand ratio for the TextArea, as described
here
. In the VerticalLayout do “setExpandRatio(script, 1)”.

3

No,

I only want to put the textarea down the horizontal layout.

The code produces this:


URL image

The horizontal layout has the height to 60px, but is a lot of greater than 60px.

4

Hi Marko!

Yes, if I put the setExpandRatio(script, 1), it works!

But, why I need to put it?

Thanks!

5

The VerticalLayout with 100% height lays components in
layout cells
, each having equal size, even if there is empty space. It can be a bit confusing, as giving 100% height for a component only takes 100% of the layout cell.

The expand ratio says how the layout cells should expand to divide extra empty space to different components. Ratio 0, which is the default, means that such component should get no extra space and the layout cell shrinks to fit the height of the component. The rest of the empty space is divided amont the non-zero rationed components according to the ratio. (In your case you have only one.)