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

Question

我正在尝试更改non-buffered grid中editorComponent - textField/integerField的width或aligment方式。

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

任何想法如何自动设置宽度或 alignment？ 或者如何按列宽设置textField/integerField的宽度？

Answer 1

我认为它应该像设置一样简单：

integerField.setWidth("100%");