如何根据列数更改编辑器元素的宽度或对齐方式(Vaadin)

Question

我试图改变 width 或 aligment of editorComponent - textField/integerField in non-buffered grid.

problem具有textfield/integerField宽度，如果大于8-9 columns.

7列：

​

​

10列：

​

​

如果存在 columns，则textFields/integerField将开始相互连接。

全程序：https://cookbook.vaadin.com/grid-with-map

主要部分是创建元素的部分：

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);

所以我试着对齐它，但它不起作用

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);

或者，如果设置元素的最大宽度，则不太有效。

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);

有什么想法，如何设置宽度或对齐自动？或者如何按列宽度设置textField/integerField的宽度？

Answer 1

我认为应该简单到设置：

integerField.setWidth("100%");