Vaadin Plus - KeyValue Pair use

General
1

I’m trying Vaadin Plus - Keyvalue pair component. Here is the code I’ve to create the pairs

public static KeyValuePairs createKeyValuePairs(PropertyBox propertyBox) {
        KeyValuePairs keyValuePairs = new KeyValuePairs();

        propertyBox.forEach(property -> keyValuePairs.add(new KeyValuePair(property.getMessage() != null ? property.getMessage() : property.getName(), String.valueOf(propertyBox.getValue(property)))));
        return keyValuePairs;
    }

I need them Horizontally but getting vertically. As per example provided in Vaadin Plus, the default is Horizontal only. What am I missing here ?

image
image1319×666 65.3 KB

2

They are responsive and wrap by default on viewports that are 768px wide or smaller.

You can either remove it entirely or set a smaller value.

3

I tried keyValuePairs.removeBreakpoint(); as well but result is same.

Here is the minimal reproducible example

public class Test extends ComponentView {


    public Test() {

       add(createKeyValuePairs());


    }

    private KeyValuePairs createKeyValuePairs() {
        final KeyValuePairs keyValuePairs = new KeyValuePairs(
                new KeyValuePair("Name", "John Smith"),
                new KeyValuePair("Email", "john.smith@company.com"),
                
                new KeyValuePair("Actions", new Button("Edit", LineAwesomeIcon.EDIT.create()))
        );
        keyValuePairs.removeBreakpoint();
        return keyValuePairs;
    }
}

image

There is enough space but still showing them vertically

image
image1625×471 39.6 KB

Something is not correct. Not sure where.

4

It is my mistake. I edited the Layout class for my needs and missed Display.FLEX which caused all these issues.

After adding it, it looks good now
image