Layout problems with Vaadin (post beta1)

Hi, my pages are not rendering in beta3, beta4 and beta5 as they were in beta1.

I’m having many alignment and other minor problems (tested with runo and reindeer, with the same problems).

I´m attaching some screenshots. The code is exactly the same, just replaced vaadin jars.

If you compare the home screen in beta1 (first image) with beta5 (second image), there are these differences:

  • The bottom left border of the panel doesn´t have a rounded border in beta5
  • There is a vertical scroll bar in beta5 (the panel and verticallayout are using setSizeFull and expandRatio)
  • The power button is not aligned to the right of the page in beta5
  • The captions of the buttons are not centered in beta5
  • The label “Tela inicial” is not alligned to the bottom of the horizontal layout

As the page is rendered as expected in beta1, i think there is some regression in newer beta versions of vaadin.

I don´t know how i should report these kind of problems, so please tell me if i have to attach more files or send more information.

Regards,

Fabiano
12596.png
12597.png

The main layouts (for example VerticalLayout and HorizontalLayout) were reimplemented for Vaadin 7 in a quite late stage. Maybe they made it to beta 2, which would explain the difference. Can’t be sure if it is a bug or just changes that requires some small tweaking from you in your code (it is a new major version after all) without seeing your implementation or HTML. Could you try to look into it deeper to find out why it is doing what it is doing?

The code below reproduces most problems i reported previously.

1 - The button “x” should be aligned to the extreme right of the window, but it isn´t
2 - The bottom left corner of the panel is missing
3 - The HorizontalLayout "label1Layout " and the lable “title” inside of it should be centered below the first panel
4 - It is not reproduced in this test, but MIDDLE alignment of a layout inside other layout is not working also


@Theme("runo")
public class X extends UI {

	private static final long serialVersionUID = 2507480479996764726L;

	@Override
	protected void init(VaadinRequest request) {
		/*
		 * Layouts
		 */
		VerticalLayout main = new VerticalLayout();
		main.setSizeFull();
		main.setMargin(true);
		main.setSpacing(true);

		HorizontalLayout topPanel = new HorizontalLayout();
		topPanel.setMargin(false);
		topPanel.setSpacing(false);
		topPanel.setWidth(100, Unit.PERCENTAGE);
		main.addComponent(topPanel);

		HorizontalLayout topPanelLeft = new HorizontalLayout();
		topPanelLeft.setMargin(false);
		topPanelLeft.setSpacing(true);
		topPanel.addComponent(topPanelLeft);
		topPanel.setComponentAlignment(topPanelLeft, Alignment.TOP_LEFT);

		HorizontalLayout topPanelRight = new HorizontalLayout();
		topPanelRight.setMargin(false);
		topPanelRight.setSpacing(true);
		topPanel.addComponent(topPanelRight);
		topPanel.setComponentAlignment(topPanelRight, Alignment.TOP_RIGHT);

		GridLayout grid = new GridLayout(6, 4);
		grid.setSizeFull();
		main.addComponent(grid);
		main.setExpandRatio(grid, 1);

		/*
		 * Components
		 */
		Button buttonTopPanelRight = new NativeButton("x");
		topPanelRight.addComponent(buttonTopPanelRight);

		VerticalLayout cell1 = new VerticalLayout();
		cell1.setSizeFull();
		grid.addComponent(cell1);

		Panel panel1 = new Panel();
		panel1.setSizeFull();
		cell1.addComponent(panel1);
		cell1.setExpandRatio(panel1, 1);

		HorizontalLayout label1Layout = new HorizontalLayout();
		cell1.addComponent(label1Layout);
		cell1.setComponentAlignment(label1Layout, Alignment.TOP_CENTER);

		Label label1 = new Label("title");
		label1Layout.addComponent(label1);

		VerticalLayout cell2 = new VerticalLayout();
		cell2.setSizeFull();
		grid.addComponent(cell2, 5, 3);

		Panel panel2 = new Panel();
		panel2.setSizeFull();
		cell2.addComponent(panel2);
		cell2.setExpandRatio(panel2, 1);

		setContent(main);
	}

}

12598.png

I don’t know if it is connected to your layout problems, but I experienced problems with the layout of the InlineDateField as well. In Beta3 everything works fine. In Beta4 the layout shifted to the top. From Beta 5 to 6 the layout improved slightly, but is still not working correctly.

Attached, you will find screenshots taken in Firefox 16.01 for Vaadin 7 Beta4 and Beta6 as well as IE9.

The code is straight forward and the problems occur with and without HorizontalLayout or VerticalLayout


public class MyVaadinUI extends UI
{

    @Override
    protected void init(VaadinRequest request) {
    	
    	GridLayout baseGrid = new GridLayout(1, 1);
    	baseGrid.setSizeFull();
    	
    	InlineDateField dateField = new InlineDateField();
    	
    	baseGrid.addComponent(dateField, 0, 0);
    	
        setContent(baseGrid);
    }

}

12604.png
12605.png
12606.png

Hi, i would like to know at least if these are known problems and if there is some schedule to look at layout problems introduced after Beta 2.

Regards,

Fabiano

Some news on this? It is preventing me from moving from… BETA 1!

Regards,

Fabiano

Fabiano,

I tried your code with 7.0.0.rc1 (just got out yesterday) and it looks like it resolves your issues.
I attached the screenshot.

Enjoy,

Ofer
12735.jpg