java - 当 CSS 用于列宽时，Vaadin 8 Grid 滚动条的行为不稳定

Question

我的 Vaadin 8 应用程序中有一个网格，有时网格的滚动条在不需要时出现或在不需要时消失。他们甚至可能陷入循环。我的网格有五列，我只使用 Vaadin 8 附带的内置渲染器。
我使用 CSS 将第一列的列宽设置为 30%。如果我从主题中删除该行，则不会出现问题，但我需要它。我怎样才能让它工作？

Answer 1

Vaadin 8 Grid 不支持通过 CSS 配置列宽，您应该以编程方式设置任何和所有列宽配置(通过 myColumn.setWidth(pixelWidth); )或客户端计算中断。这些计算对于确定没有固定宽度的任何列的预期宽度至关重要，因此与滚动条逻辑紧密相关。
不幸的是，没有内置的解决方案来设置列的百分比宽度，或者从服务器端获取网格的实际大小，或者监听网格的大小变化。但是，您可以使用 SizeReporter add-on帮助解决后两者(查看 Code Samples tab 以获取使用说明)，并从那里计算所需的像素宽度。 GridScrollerExtension add-on还提供两种功能，以及查询当前列宽和其他特定于网格的功能。
对于稍微有点 hackier 的解决方案，您还可以使用 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 调用)。