Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Window layout issues

Kevin Klein
6 years ago Dec 22, 2015 1:20am

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.

 

Aziz Rehman
6 years ago Dec 22, 2015 10:01am

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);
Kevin Klein
6 years ago Dec 22, 2015 3:42pm

Problem solved.

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.
 

Kevin Klein
6 years ago Dec 22, 2015 4:35pm

Additionally, the layout doesn't seem to work well with components sized in ems. Pixels appears to work best.