Search code examples
cssgridalignmentvaadinwidth

How to change the width or alignment of an editor element according to the number of columns (Vaadin)

I am trying to change the width or aligment of editorComponent - textField/integerField in non-buffered grid.

The problem is with textfield/integerField width, if there are more than 8 - 9 columns.

7 columns:

enter image description here

10 columns:

enter image description here

If there are more columns, the textFields/integerField starts to connect to each other

Full program: https://cookbook.vaadin.com/grid-with-map

The main part, where the elements are created:

IntegerField integerField = new IntegerField();
binder.forField(integerField).bind(map -> map.get("col" + index),
                (map, value) -> map.put("col" + index, value));
grid.addColumn(map -> map.get("col" + index))
                .setEditorComponent(integerField).setHeader("Col " + index);

So I tried to align it, but it doesn't works

IntegerField integerField = new IntegerField();
integerField.getElement().getStyle().set("margin-left", "auto");
integerField.getElement().getStyle().set("margin-right", "auto");
binder.forField(integerField).bind(map -> map.get("col" + index),
                (map, value) -> map.put("col" + index, value));
grid.addColumn(map -> map.get("col" + index))
                .setEditorComponent(integerField).setHeader("Col " + index);

Or if I set the max width of element, it doesn't works too

IntegerField integerField = new IntegerField();
integerField.setMaxWidth("20");
binder.forField(integerField).bind(map -> map.get("col" + index),
                (map, value) -> map.put("col" + index, value));
grid.addColumn(map -> map.get("col" + index))
                .setEditorComponent(integerField).setHeader("Col " + index);

Any ideas how to set the width or alignment automatically ? Or how to set the width of textField/integerField by column width ?

Solution

  • I think it should be as simple as setting:

    integerField.setWidth("100%");