对齐选择组件的项目列表答案

【问题标题】：Align Items List of a Select Component对齐选择组件的项目列表
【发布时间】：2021-05-14 18:30:15
【问题描述】：

Vaadin 14.4.7

我的表单上有一个 Select 组件。如果选择列表中的项目数量足够多，则展开列表的顶部接触窗口顶部，列表显示两个垂直滚动条。如果我将存在 Select 的 Layout 向下移动一点，看起来还不错。不过，我想知道是否有办法对齐项目列表并将其置于“选择”框的中心。

这是滚动条的图像：

这是整个应用程序：

这是创建选择框的代码：

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

【问题讨论】：

截图会有所帮助
同时添加代码。我们无法想象您的问题...
你说的是类似的问题吗？ github.com/vaadin/vaadin-combo-box/issues/892
不，github票和combo list的宽度有关；想要使点击列表足够宽以容纳最长的字符串值。我的问题是不同的，因为截图希望能清楚地说明。我的问题与打开的选择列表的高度有关。当我的列表碰到浏览器窗口的顶部时，它会导致两个内部元素显示垂直滚动条。我猜一个来自组件中的某个包装器，而另一个是当列表长于显示框时预期的正常滚动条。

标签： vaadin vaadin-flow vaadin14

【解决方案1】：

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

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

如此简单。

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

【讨论】：