当 CSS 用于列宽时，Vaadin 8 Grid 滚动条的行为不正常答案

【问题标题】：Vaadin 8 Grid scrollbars behave erratically when CSS is used for column widths当 CSS 用于列宽时，Vaadin 8 Grid 滚动条的行为不正常
【发布时间】：2021-08-01 01:57:02
【问题描述】：

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

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

【问题讨论】：

标签： java css grid vaadin vaadin8

【解决方案1】：

我想扩展 Anna Koskinen 的答案 https://*.com/a/67474239/1184842，但评论的代码有点多，所以这里没有真正的单独答案...

SizeReporter 只能用作如何将客户端尺寸发送到服务器的一种想法，因为需要 Grid 的 Escalator 中的 tableWrapper 的内部宽度。否则，垂直滚动条空间可能会被用作导致错误结果的列的空间，例如列的换行。

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

    @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());
            }
        });
    }

【讨论】：

【解决方案2】：

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

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

对于稍微复杂的解决方案，您还可以使用 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);");

请注意，这只会为您提供初始宽度，对调整大小问题没有帮助。解决方案取决于什么都可以触发 Grid 调整大小（例如，在调整浏览器大小时通过 ui.getPage().addBrowserWindowResizeListener 重复第二个 JavaScript 调用）。

【讨论】：