Search code examples
vaadinvaadin-flowvaadin14

Align Items List of a Select Component

Vaadin 14.4.7

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 image of the scroll bars:

enter image description here

This is the app as a whole:

enter image description here

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

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

    So simple.

    (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.)