Web Client: Unnecessary scrolling required in some dropdowns

[Michele Morgan]

Evergreen 2.12, Master

Many option dropdowns in the web client have a vertical size that is smaller than necessary relative to the page. This can require unnecessary scrolling on the part of the staff user.

It would greatly enhance usability if, whenever possible, all available selections were visible in the dropdown. Some of the option lists are too long to fit without scrolling, but would benefit from more space. The Items Out dropdown is concise and having all options visible would make it much easier for staff members as they serve patrons.

Some examples of smaller than necessary dropdowns are:

Actions in Items Out
Actions in Item Status
Buckets in Copy Buckets
Buckets in Record Buckets

Screenshots are attached

[Michele Morgan (mmorgan)]

Actions on the Patron Holds screen would also benefit from more height.

[Kathy Lussier (klussier)]

See also related bug 1464767, which started out as another bug, but also addressed some of the points Michele raises here.

[Eva Cerninakova (ece)]

I have confirmed the problem still exists in 3.2 beta sandbox (I have checked e.g. in the Item Status and Copy Buckets interfaces).
I also came across the same problem in the reporter templates creator interface (see the attached image).

[Remington Steed (rjs7)]

It looks like the height of many of these dropdowns is controlled by "max-height" in this CSS class:

templates/staff/css/style.css.tt2:

    .scrollable-menu {
        height: auto;
        max-height: 200px;
        overflow-x: hidden;
    }

A few ideas to improve this:

A. Increase the max-height a little (400px would match the column picker)
B. Increase the max-height a lot (1000px?) and risk it going off the bottom of the visible screen (requiring scrolling the whole screen)
C. Try to calculate the max-height to stay within the visible portion of the screen (maybe using "vh" Viewport units instead of "px")

Opinions on these ideas?

[Remington Steed (rjs7)]

And regarding Eva's comment in #7 about the Reporter, there's a separate bug for menus that go off the bottom of the screen: bug 1706415.

[Remington Steed (rjs7)]

Here's a branch for the simplest improvement (increase max-height to 400px to match column picker). I also think this is the best choice, since it matches the frequently used column picker. If the column picker ever does anything fancier for its height or position, then we should probably match it for other dropdowns. But until then, this seems a good solution.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/rsteed/lp1669120_increase_dropdown_menu_height

[Bill Erickson (berick)]

+1 to general plan. (I had applied a similar change locally). Patch tested and merged to 3.2 and above. Thanks, Remington.

[Dawn Dale (ddale)]

I have tested this code and consent to signing off on it with my name, Dawn Dale and my email address, <email address hidden>