Bug with setComponentAlignment()?

Hello,

Using code below I get following result:

To me it looks like setComponentAlignment() dont work correctly with “right”-parameter.


public class Application extends com.itmill.toolkit.Application{

	public void init() {
		try{
		    Window main = new Window("Label/Layout test");
	        setMainWindow(main);
	        main.setSizeFull();

	        GridLayout baseLayout = new GridLayout(3, 3);
	        baseLayout.setSizeFull();
	        baseLayout.setSpacing(true);

	        Label label1 = new Label("TopLeft");
	        Label label2 = new Label("TopCenter");
	        Label label3 = new Label("TopRight");
	        Label label4 = new Label("MiddleLeft");
	        Label label5 = new Label("MiddleCenter");
	        Label label6 = new Label("MiddleRight");
	        Label label7 = new Label("BottomLeft");
	        Label label8 = new Label("BottomCenter");
	        Label label9 = new Label("BottomRight");

	        baseLayout.addComponent(label1, 0, 0);
	        baseLayout.addComponent(label2, 1, 0);
	        baseLayout.addComponent(label3, 2, 0);
	        baseLayout.addComponent(label4, 0, 1);
	        baseLayout.addComponent(label5, 1, 1);
	        baseLayout.addComponent(label6, 2, 1);
	        baseLayout.addComponent(label7, 0, 2);
	        baseLayout.addComponent(label8, 1, 2);
	        baseLayout.addComponent(label9, 2, 2);

	        baseLayout.setComponentAlignment(label1, "top left");
	        baseLayout.setComponentAlignment(label2, "top center");
	        baseLayout.setComponentAlignment(label3, "top right");
	        baseLayout.setComponentAlignment(label4, "middle left");
	        baseLayout.setComponentAlignment(label5, "middle center");
	        baseLayout.setComponentAlignment(label6, "middle right");
	        baseLayout.setComponentAlignment(label7, "bottom left");
	        baseLayout.setComponentAlignment(label8, "bottom center");
	        baseLayout.setComponentAlignment(label9, "bottom right");

	        main.setLayout(baseLayout);

		}catch(Exception e){
			e.printStackTrace();
		}
    }
}

Hi,

In fact the center wasn’t working here eihter. Chromes inspector and Firefox’s firebug showed that the labels are always on the left edge of the grid cell they were in.

So vertical alignment works, horizontal doesn’t. The reason for this is one you sorta just have to know - the default width of a label is 100%.

Therefore, the grid pushes the label to the right but as there is no free space next to label (visually there is but technically not), it wont’ move anywhere. What you have to do to get it aligned horizontally is tell the labels that they should only take as much space as they need, and not 100%. This is done with setWidth(null), or just setSizeUndefined().

Add this to your code after you created all the labels:


            label1.setSizeUndefined();
            label2.setSizeUndefined();
            label3.setSizeUndefined();
            label4.setSizeUndefined();
            label5.setSizeUndefined();
            label6.setSizeUndefined();
            label7.setSizeUndefined();
            label8.setSizeUndefined();
            label9.setSizeUndefined();

Now they should come up where you want them!

Additionally I would suggest using the Alignment enum when aligning the components.

Instead of:


baseLayout.setComponentAlignment(label8, "bottom center");

you can use:


baseLayout.setComponentAlignment(label8, Alignment.BOTTOM_CENTER);

This way your compiler will catch typos and you won’t have to search for some minor typing bugs.

-Jens-