对齐选定组件的项目列表 [英] Align Items List of a Select Component

问题描述

瓦丁 14.4.7

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

I have a Select component on my form. If the items in the select list are enough in number, the top of the expanded list touches the top of the window and the list shows two vertical scroll bars. If I move the Layout in which the Select exists down a bit, things look okay. I was wondering, though, if there was a way to align the list of items and have it center on the Select box.

这是滚动条的图像:

这是整个应用程序:

这是创建选择框的代码:

This is the code that creates the Select box:

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

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

And this is the code to create the Horizontal Layout in which the row of Select boxes resides, with my fix to move it down a little commented out:

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 规则移除内部滚动条:

Well, I finally figured this out. I was able to get the inner scroll bar removed with a CSS rule applied to vaadin-list-box:

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

就这么简单.

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

(Really, as I look at it now, I posed my question incorrectly. I should have asked how to remove the inner scroll bar, which is what I was really after.)

这篇关于对齐选定组件的项目列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！