Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Window layout issues
I'm having some issues getting a window with a GridLayout to size as I would expect. The right-hand buttons appear off the right side of the window, and stay there even as I resize the window. There is also always a horizontal scroll bar at the bottom of the window.
A screen shot and source code are attached.
Hi, I would rather use the VerticalLayout instead of GridLayout:
i.e. you can replace your code with the following to see the result:
setCaption("Demo"); setWidth("640px"); setHeight("480px"); field1 = new TextField("Enter Value:"); field2 = new TextField("Another Value:"); buttonA = new Button("Top"); buttonB = new Button("Bottom"); button1 = new Button("OK"); button2 = new Button("Cancel"); FormLayout form = new FormLayout(); form.addComponent(field1); form.addComponent(field2); FormLayout vert = new FormLayout(buttonA, buttonB); vert.setSpacing(true); form.addComponent(vert); HorizontalLayout horz = new HorizontalLayout(button1, button2); horz.setSpacing(true); HorizontalLayout topLayout= new HorizontalLayout(); topLayout.addComponent(form); topLayout.setSpacing(true); topLayout.addComponent(vert); VerticalLayout mainLayout= new VerticalLayout(); mainLayout.setSpacing(true); mainLayout.addComponent(topLayout); mainLayout.addComponent(horz); mainLayout.setComponentAlignment(topLayout, Alignment.MIDDLE_CENTER); mainLayout.setComponentAlignment(horz, Alignment.MIDDLE_CENTER); setContent(mainLayout);
The combination of the FormLayout with a width of 100% and the VertLayout with no specified width apparently confused the layout system. Adding vertLayout.setWidth("80px") made everyone happy again.
Additionally, the layout doesn't seem to work well with components sized in ems. Pixels appears to work best.