Bug with component alignments?

Hello,

I try to control alignments of components on layout. I haven’t had suck so far.

On example code below:

  1. I set up GridLayout to fill view, have two colums on it
  2. place OrdererLayouts on GridLayout’s cells.
  3. Add labels into both inner layouts
  4. and I want to align right side components to right part of view.

public class TestApplication extends Application {

	public init() {
		Window main = new Window("Test window");
	    	setMainWindow(main);

		GridLayout layout = setupLayout();
	    
		main.addComponent(layout);
	}

	private GridLayout setupLayout(){
		GridLayout mainLayout = new GridLayout(2, 1);
		mainLayout.setWidth("100%");

		OrderedLayout leftLayout = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);
		OrderedLayout rightLayout = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);

		Label leftLabel = new Label("LEFT AREA");
		Label rightLabel = new Label("RIGHT AREA");

		leftLayout.addComponent(leftLabel);
		rightLayout.addComponent(rightLabel);

		mainLayout.addComponent(leftLayout, 0, 0);
		mainLayout.addComponent(rightLayout, 1, 0);
		
		/*
		 * Attempt 1: I try to align "RIGHT AREA" to right. First thing which comes into
		 * mind is to align rightLabel inside of rightLayout to right (with code on comments below).
		 * But that wont do anything. To me, this seems bug - is it?
		 */
//		rightLayout.setWidth("100%");
//		rightLayout.setComponentAlignment(rightLabel, GridLayout.ALIGNMENT_RIGHT, GridLayout.ALIGNMENT_TOP);

		/*
		 * Attempt 2: Next thing which comes into mind, is to push rightLayout to right (it's width should be set by
		 * amount rightLabel needs for it's display purposes, right?)
		 * And it works... but only on IE (7.0), not on Firefox (3.0.4) - this must be bug.
		 */
		mainLayout.setComponentAlignment(rightLayout, GridLayout.ALIGNMENT_RIGHT, GridLayout.ALIGNMENT_TOP);
		
		return mainLayout;
	}
	
}

Note: I know, attempt 1 is commented out, because it should not be there when attempting 2.

Questions:
Am I going right direction on either of attempts?
Is there something I’m missing with my attempts?
What would be best way to get"RIGHT AREA" to right?

Which Toolkit version did you use? In 5.2.x series there are some limitations and problems in alignments. Unfortunately they were hard to corrent and we ended up rewriting the whole layouting system for 5.3.0. I hope that it will solve all these problems when it is released asap. You can try it already with nightly builds, but unfortunately there are still some layouting bugs to be sorted out before release.

Also note that a Window always has a layout so you should not add the layout to the main window using addComponent

but instead use setLayout like

main.setLayout(layout);

Using addComponent will give you an additional layout between the window and your layout, which can cause unwanted side effects for instance when the window layout is not 100% wide and your layout is.

Yes, its 5.2 series toolkit which gave these results… I guess I should try 5.3 as project I’m on is going to switch to anyway.

Thanks for tip Artur, although code snippet I provided was just example demonstrating problem / how bug works - I have layout set to main window on my project.

Hi there,
I am experiencing a problem with alignment of labels.
I use the latest version of ITMill (so far) which is 5.3.0 rc 11.
I can easily center align a button, but I can’t do it for a label.

This is my code:

import com.itmill.toolkit.Application;
import com.itmill.toolkit.ui.Alignment;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.Component;
import com.itmill.toolkit.ui.HorizontalLayout;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.VerticalLayout;
import com.itmill.toolkit.ui.Window;

public class AlignmentTestApplication extends Application
{
    private Window mainWindow;

    public AlignmentTestApplication()
    {
    }

    @Override
    public void init()
    {
        VerticalLayout formattedLayout = new VerticalLayout();
        formattedLayout.setSizeUndefined();
        formattedLayout.setWidth("100%");

        addComponent(formattedLayout, new Button("Test Button"));
        addComponent(formattedLayout, new Label("Test Label"));
        addComponent(formattedLayout, new Button("Button Again"));
        
        mainWindow  = new Window("Main Window", formattedLayout);
        
        setMainWindow(mainWindow);
    }
    
    private void addComponent(VerticalLayout layout, Component component)
    {
        HorizontalLayout internalLayout = new HorizontalLayout();
        internalLayout.setSizeUndefined();
        internalLayout.setWidth("100%");
        internalLayout.addComponent(component);
        internalLayout.setComponentAlignment(component, Alignment.MIDDLE_CENTER);
        Panel internalPanel = new Panel(internalLayout);
        internalPanel.setSizeUndefined();
        internalPanel.setWidth("100%");
        layout.addComponent(internalPanel);
    }
}

And this is the result I see:

Thanks,
Houman Atashbar.

Hi Houman, and welcome to the forums.

From RC11 and onwards, Labels are by default 100% width. This causes the behaviour your getting (the Label is centered, but because it is 100% wide, it stretches from side to side).

Set your Label components width to ‘null’, and the alignment should work as expedted.

Yep, I also noticed this change yesterday, since RC11, in custom layouts, there is a strange behavior when you try to insert a label into a table:


<table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top"><strong>Price: </strong> </td>
                    <td valign="top" width="70">
                        <div location="package.price"></div>
                    </td>
                    <td valign="top" align="left">  credits.
                        <small>(without discounts)</small>
                    </td>
                </tr>
            </table>

Previously, there were no width=“70” in the second column but since RC11 the column become zero width in the rendered table, so I added 70 pixel width explicitly.

dll, no need to specify that in your CustomLayout. Making the Label undefined width should be enough. If it’s not, let us know, it’s a bug :slight_smile:

Hi Jouni,
Thanks for your comment.
It worked. It ALMOST worked :slight_smile:

Now there is a small issue. This label is not exactly in the center, is it?

I just made the changes you mentioned (passed null to label.setWidth method)

There is also an issue with right alignment. The second part of the label after space is not displayed.

I just changed alignment from MIDDLE_CENTER to MIDDLE_RIGHT

Now let’s resize the window:

Regards,
Houman.

Hi there,
Has someone got any idea on this issue?
Thanks,
Houman.

This problem is fixed in the current stable release.
Thanks,
Houman.