当CSS用于列宽时，Vaadin 8网格滚动条的行为不稳定

Question

我在我的Vaadin8应用程序中有一个网格，有时网格的滚动条在不需要的时候出现，或者在不需要的时候消失，甚至会陷入循环。我的网格有五列，我只使用Vaadin 8附带的内置渲染器。

我使用CSS将第一列的列宽设置为30%。如果我从主题中删除这一行，问题不会出现，但我需要它。我怎么才能让它工作呢？

Answer 1

Vaadin8Grid不支持通过CSS配置列宽，你应该以编程方式设置任何和所有的列宽配置(通过myColumn.setWidth(pixelWidth);)，否则客户端的计算会中断。这些计算对于确定没有固定宽度的任何列的预期宽度至关重要，因此与滚动条逻辑紧密相关。

不幸的是，没有内置的解决方案来设置列的百分比宽度，或者从服务器端获取Grid的实际大小，或者监听Grid的大小更改。但是，您可以使用SizeReporter add-on来帮助处理后两种情况(查看Code Samples tab中的使用说明)，并从那里计算所需的像素宽度。GridScrollerExtension add-on还提供了这两种功能，以及查询当前列宽和其他特定于网格的功能。

对于稍微复杂一点的解决方案，您还可以使用JavaScript回调来查询宽度：

        ui.getPage().getJavaScript().addFunction("gridSizeCallback",
                new JavaScriptFunction() {
                    @Override
                    public void call(JsonArray arguments) {
                        // set myColumn width as 30%
                        myColumn.setWidth(arguments.getNumber(0) * 0.30);
                    }
                });
        ui.getPage().getJavaScript()
                .execute("gridSizeCallback(document.getElementById('"
                        + grid.getId() + "').clientWidth);");

请注意，这只给出了初始宽度，对调整大小问题没有帮助。解决方案取决于什么都可以触发网格大小调整(例如，当浏览器调整大小时，通过ui.getPage().addBrowserWindowResizeListener重复第二个JavaScript调用)。

Answer 2

我想扩展Anna Koskinen的answer https://stackoverflow.com/a/67474239/1184842，但这对于一个评论来说有点太多的代码，所以这里没有真正的单独答案……

SizeReporter只能用作如何将客户端大小发送到服务器的想法，因为在网格的自动扶梯中需要tableWrapper的内部宽度。否则，垂直滚动条空间可能会被用作列的空间，从而导致错误的结果，例如列的换行。

我通过使用扩展连接器更改了Grid的派生类中的实现，从而实现了这一点。我以这种方式更改了SizeReporterConnector的extend方法中的初始化方法模板：

    @Override
    protected void init() {
        super.init();

        this.extendedGridServerRpc = this.getRpcProxy(ExtendedGridServerRpc.class);

        final Element widget = getWidget().getEscalator().getTableWrapper();

        if (widget.getOffsetWidth() > 0 && widget.getOffsetHeight() > 0) {
            extendedGridServerRpc.innerSizeChanged(widget.getOffsetWidth(), widget.getOffsetHeight());
        }

        LayoutManager.get(this.getConnection()).addElementResizeListener(widget, new ElementResizeListener() {
            public void onElementResize(ElementResizeEvent event) {
                extendedGridServerRpc.innerSizeChanged(widget.getOffsetWidth(), widget.getOffsetHeight());
            }
        });
    }