Vaadin 7.2.0 FontAwesome alignment

I’m trying to layout an icon (using font awesome) and a label so they are both middle center aligned. It seems that the label works just fine but the icon is still top aligned. Anything I am doing wrong here?

Thanks!

    public class QuestionLayout extends HorizontalLayout {

        public QuestionLayout() {
            setWidth(100, Unit.PERCENTAGE);
            setHeight(30, Unit.PIXELS);

            final Label icon = new Label();
            icon.setIcon(FontAwesome.BARS);
            icon.setHeight(20, Unit.PIXELS);
            icon.setWidth(20, Unit.PIXELS);

            final Label label = new Label("How would you rate the partner's safety processes and manuals?");

            addComponent(icon);
            setComponentAlignment(icon, Alignment.MIDDLE_CENTER);
            setExpandRatio(icon, 0f);

            addComponent(label);
            setComponentAlignment(label, Alignment.MIDDLE_CENTER);
            setExpandRatio(label, 1f);
        }
    }

If you highlight the text you can also see there also seems to be a weird spacer thing.
14005.png

What is exactly the problem? Do you refer to the horizontal spacer between the icon and the text, or the vertical spacer between the label rows? Your code doesn’t show how you construct the vertical layout.

Your use of a separate Label component just for the icon looks a bit odd. You would have achieved the same layout by just usng FormLayout, which places the component icon left of the component.

FormLayout layout = FormLayout();

Label label1 = new Label("How would you rate the partner's safety processes and manuals?");
label1.setIcon(FontAwesome.BARS);
layout.addComponent(label1);
...

But I don’t know what you are trying to achieve.

The alignments in your code have no effect whatsoever, as Label is 100% wide by default, and centering something that is 100% wide doesn’t have any effect - if it takes all the width, it’s already at the center! Center alignment is only meaningful for something less wide (or high).

But, if you set the width of the components as undefined, you can’t use the expand ratio. But, as said, it’s not clear to me what you are trying to achieve.

I added an attachment below which hopefully better illustrates what I am trying to achieve. Notice that the label (i.e. text) is perfectly aligned within the horizontal space but the icon is not (top aligned). It’s not a form so using it seems really inappropriate. I would prefer Grid and/or CSS layout. I’m just trying to do quick POC.

However thanks to your question I think I just found out why it was failing. I noticed that if I used two labels (i.e. no font icon) they weren’t being vertically aligned either. I guess this was throwing off the calculations.

    icon.setHeight(20, Sizeable.Unit.PIXELS);
    icon.setWidth(20, Sizeable.Unit.PIXELS);

Once I removed this it was aligning fine (see FA2.png). BTW the purpose of the image is a hint to end user for performing a Drag n Drop.

14006.png
14007.png

Ok.

Notice that you could also have put the labels in HTML mode and used the font icon there as described
here
, so you wouldn’t have any alignment or spacing problems.