对齐 Select 组件的项目列表

Question

Vaadin 14.4.7

我的表单上有一个 Select 组件。如果 select 列表中的项目数量足够，展开列表的顶部会触及 window 的顶部，并且列表会显示两个垂直滚动条。如果我将 Select 所在的布局向下移动一点，一切看起来都还不错。不过，我想知道是否有一种方法可以对齐项目列表并将其置于 Select 框的中心。

这是滚动条的图片：

这是整个应用程序：

这是创建 Select 框的代码：

    variableColumnColumnSelectbox = new Select<>();
    variableColumnColumnSelectbox.setLabel("Column:");
    variableColumnColumnSelectbox.getElement().getThemeList().add("selectoverlaycustom");
    variableColumnColumnSelectbox.setItemLabelGenerator(DimClmn::getClmnRptHdngCd);
    variableColumnColumnSelectbox.setEnabled(false);

这是创建 Select 行所在行的水平布局的代码，我的修复方法是将其向下移动一点注释掉：

private HorizontalLayout buildVariableColumnsGridLayout() {
    HorizontalLayout variableColumnsGridHorzLayout = new HorizontalLayout();
    variableColumnsGridHorzLayout.getElement().getStyle().set("max-width", "70%");
    variableColumnsGridHorzLayout.getElement().getStyle().set("margin", "auto");

    /*
     * This top margin value is set in order to move the variables column grid down
     * so that the column select box in the grid form has room to display all of the
     * values properly. If the report has a lot of columns, this select list will
     * show two vertical scroll-bars. I don't know why.
     */
    // variableColumnsGridHorzLayout.getElement().getStyle().set("margin-top",
    // "10px");
    createVariableColumnsGridLayout(variableColumnsGridHorzLayout);

    return variableColumnsGridHorzLayout;
}

Answer 1

好吧，我终于想通了。我能够通过将 CSS 规则应用于 vaadin-list-box:

来删除内部滚动条

[part="items"]{
    overflow-y: unset;
}

就这么简单。

（真的，现在看来，我的问题提错了，我应该问如何去掉内部滚动条，这才是我真正想要的。）

对齐 Select 组件的项目列表

Align Items List of a Select Component

vaadin

vaadin-flow

vaadin14