CODEWITHSUNDEEP
javavaadin
OnDemand
OnDemand

Reputation: 377

Vaadin Icon and Label not in one Row using Horizontal Layout

i try to get the Icon and the Label in one Row, but the icon is a little bit higher.

This was my try:

  private VerticalLayout createActiveProductsCard() {
    VerticalLayout layout = new VerticalLayout();
    layout.setWidth("50px");
    layout.setHeight("150px");
    layout.getStyle().set("margin-bottom","20px");
    layout.getStyle().set("border", "0.5px solid #9E9E9E");

    Icon icon = new Icon(VaadinIcon.BARCODE);
    icon.setSize("20px");
    Label title = new Label("Produkte");
    title.getStyle().set("font-size","20px");
    HorizontalLayout horizontalLayout = new HorizontalLayout(icon, title);
    horizontalLayout.setVerticalComponentAlignment(Alignment.AUTO);
    layout.add(horizontalLayout);
    return layout;
}

But it wont work, does anyone has a solution?

Upvotes: 3

Views: 558

Answers (1)

Alejandro Duarte
Alejandro Duarte

Reputation: 1479

Use Alignment.CENTER instead of Alignment.AUTO, and enclose the Label in a Div. Here's an example:

Icon icon = new Icon(VaadinIcon.BARCODE);
icon.setSize("20px");
Div title = new Div(new Label("Produkte"));
title.getStyle().set("font-size","20px");
HorizontalLayout horizontalLayout = new HorizontalLayout(icon, title);
horizontalLayout.setAlignItems(Alignment.CENTER);
layout.add(horizontalLayout);

Upvotes: 6

Related Questions