对齐选择组件的项目列表

问题描述

瓦丁 14.4.7

我的表单上有一个 Select 组件。如果选择列表中的项目数量足够，则展开列表的顶部会接触到窗口的顶部，并且列表会显示两个垂直滚动条。如果我将 Select 所在的布局向下移动一点，事情看起来没问题。不过，我想知道是否有办法对齐项目列表并将其放在“选择”框的中心。

这是滚动条的图像：

这是整个应用程序：

这是创建选择框的代码：

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

这是创建选择框行所在的水平布局的代码，我的修复将其向下移动并注释掉：

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

解决方法

好吧，我终于想通了。我能够使用应用于 vaadin-list-box 的 CSS 规则移除内部滚动条：

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

就这么简单。

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

vaadin vaadin-flow vaadin14