grid layout problem

hello vaadiners

Maybe my problem is trivial but I haven’ t found a solution to that myself

I attached a screenshot of my problematic layout

It is a form with a grid layout what I would like to do is eliminate the gaps between the row…

If I am right this is because somehow the grid is setsizefull so the grid height is to high

here is my code that creates the layout:

public class NewMessageForm extends Form {

Translations translations = null;
HashMap<String, Resource> resources = null;
Connection conn = null;

private int messageHandle;
private String from = "";
private TokenField addressBookTarget = null;
/* LAYOUT */

private final TokenField toField = new TokenField("To");
private final TokenField ccField = new TokenField("CC");
private final TextField bodyField = new TextField();
private final TextField subjectField = new TextField("Subject");

private final Label toLabel = new Label("To");
private final Label ccLabel = new Label("CC");
private final Label subjectLabel = new Label("Subject");

private final FormLayout toLayout= new FormLayout();
private final FormLayout ccLayout= new FormLayout();
private final FormLayout subjectLayout= new FormLayout();


private final Button addCC = new Button("add CC");
private final Button addTo = new Button("add To");

private final Button submit = new Button("Send");
private final CheckBox priorityField = new CheckBox("Low priority");
private final Label priorityLabel = new Label("Low priority");

// private final GridLayout customLayout= new GridLayout(3,5);
private final VerticalLayout customLayout = new VerticalLayout();
//private final GridLayout headerGrid = new GridLayout(3, 3);
private final GridLayout headerGrid = new GridLayout(2, 5);
private final HorizontalLayout footer = new HorizontalLayout();

// popup ablak és elemei
private final Window popup = new Window("Messages");
private final ListSelect addressBook = new ListSelect();
private final HorizontalLayout windowFooter = new HorizontalLayout();
private final Button add = new Button("Add");
private final Button cancel = new Button("Cancel");

public NewMessageForm() {
    this.setSizeUndefined();
	this.setWidth("100%");
	customLayout.setWidth("100%");

	// form összeállitása
	bodyField.setWidth("100%");
	bodyField.setRows(10);
	bodyField.setRequired(true);

	subjectField.setWidth("100%");
	subjectField.setRequired(true);

	toField.setRequired(true);

	headerGrid.setSizeUndefined();
	headerGrid.setWidth("100%");
	headerGrid.setSpacing(true);
	headerGrid.setMargin(true);
	
	toField.setWidth("100%");
	toLayout.setWidth("100%");
	headerGrid.setColumnExpandRatio(0, 1);
	headerGrid.setRowExpandRatio(3, 1);
	
	toLayout.addComponent(toField);
	headerGrid.addComponent(toLayout);
	
	
	headerGrid.addComponent(addTo);
	headerGrid.setComponentAlignment(addTo, Alignment.MIDDLE_RIGHT);
	
	
	ccLayout.addComponent(ccField);
	headerGrid.addComponent(ccLayout);
	
	headerGrid.addComponent(addCC);
	headerGrid.setComponentAlignment(addCC, Alignment.MIDDLE_RIGHT);
	
	subjectLayout.addComponent(subjectField);
	headerGrid.addComponent(subjectLayout, 0,2, 1,2 );
	headerGrid.addComponent(bodyField, 0,3, 1,3 );
	headerGrid.addComponent(priorityField);
	headerGrid.addComponent(submit);
	headerGrid.setComponentAlignment(submit, Alignment.BOTTOM_RIGHT);
	
	//customLayout.addComponent(headerGrid);
	this.setLayout(headerGrid);


.
.
.

}
11492.png

I don’t think the size of the grid has an effect on the spacing unless you also set expand ratios for other rows.

Does taking out “headerGrid.setSpacing(true)” help at all? Also, try turning off all margins for toLayout, ccLayout etc.