Hello all!
Having a layout problem …
FormLayout seems to draw contents into the rectangle to the right of it when making the browser window smaller.
Please look at attached screenshots:
First screenshot shows how it is expected, second shows what happens when narrowing the browser window.
Here is the code to reproduce this problem:
public class FormLayoutTest extends HorizontalLayout {
public FormLayoutTest() {
setSizeFull();
final Component form = buildForm();
form.setWidth(100, Unit.PERCENTAGE);
addComponent(form);
setExpandRatio(form, 1f);
final Component aside = buildAside();
aside.setSizeUndefined(); // when I comment this out, aside disappears - ???
addComponent(aside);
}
private Component buildForm() {
final FormLayout formLayout = new FormLayout();
final TextField textField = new TextField("Hello TextField");
final CheckBox checkBox = new CheckBox("Hello CheckBox");
final TextArea textArea = new TextArea("Hello TextArea");
textArea.setRows(20);
final TableColumnDefinition [] columnDefinitions = new TableColumnDefinition[]
{
new TableColumnDefinition("name", "Name", String.class, true),
new TableColumnDefinition("identity", "Identity", Integer.class, true),
new TableColumnDefinition("date", "Date", Date.class, true),
};
final Table table = WdFieldFactory.instance.newEditTable("Hello Table", 7, columnDefinitions);
table.setSizeUndefined(); // THIS IS IMPORTANT TO BE VISIBLE IN A FORMLAYOUT!
final Container tableModel = table.getContainerDataSource();
for (int i = 0; i < 4; i++) {
final Integer id = new Integer(i);
final Item item = tableModel.addItem(id);
item.getItemProperty("name").setValue("My Name "+i);
item.getItemProperty("identity").setValue(id);
item.getItemProperty("date").setValue(new Date());
}
formLayout.addComponent(textField);
formLayout.addComponent(table);
formLayout.addComponent(checkBox);
formLayout.addComponent(textArea);
return formLayout;
}
private Component buildAside() {
final AbstractOrderedLayout layout = new VerticalLayout();
for (int i = 0; i < 30; i++)
layout.addComponent(new Label("Hello World "+i));
return layout;
}
}
