Button alignment doesn't work for HorizontalLayout

Hi, I’m using Vaadin v6.6.4 and have the following problem:

I wrote the following code, which should align buttons “Expand comments” and “Add comment” to the right.


        HorizontalLayout postBottomLayout = new HorizontalLayout();
        postBottomLayout.setWidth("100%");
        postBottomLayout.addStyleName("postbottom");
        
        Button expandComments = new IdInformatedButton("Expand comments", post.getId());
        expandComments.setSizeUndefined();
        Button addComment = new IdInformatedButton("Add comment", post.getId());
        addComment.setSizeUndefined();
        
        postBottomLayout.addComponent(expandComments);
        postBottomLayout.setComponentAlignment(expandComments, Alignment.MIDDLE_RIGHT);

        postBottomLayout.addComponent(addComment);
        postBottomLayout.setComponentAlignment(addComment, Alignment.MIDDLE_RIGHT);

The thing I’m trying to do is to align two buttons to the right side of layout, but as a result I get one button aligned to right, another one is situated in the center. I’ve tried setting expandRatio for this buttons, but it aligns them to the left. Can anyone point me my mistake?

Thanks

What you could do is add an empty Label to the HorizontalLayout and give it 1.0f (i.e 100%) expandratio. In that case you have

| LABEL_________ |BUTTON1|BUTTON2 |

if that is what you want. However the HorizontalLayout, I guess , most have a fixed width,

Try with a CSS layout, add a style for your two buttons and add float:right to make them go to the right part of the screen. Adding an extra style for your 3 buttons will allow you to control padding, etc.

This is actually how it should work (without expand ratios) - each component in the layout gets a “layout cell” and alignment is effective within the cell. The space is divided equally between the cells when no expand ratios are specified.

The easiest solutions would probably be to use either two levels of layouts (e.g. a top-level layout that contains an undefined width middle right aligned layout containing both buttons) or a spacer component with expand ratio 1 on the left. CssLayout is another easy option if you don’t mind writing a line or two of CSS for handling the alignment.

Thanks a lot for explanations. I decided to use a spacer component as the easiest solution.