I'm designing an online form that includes selection of options from combo boxes. The submit button is on a sticky bar at the bottom of the screen.
My question is: should the drop down of a combo box in a form be above or below the sticky bar?
-
What do you mean by sticky? Is the bar fixed to the bottom of the screen at all times?– AndyCommented Feb 14, 2023 at 12:22
-
@Andy Yes, that's what I mean– Blue OceanCommented Feb 15, 2023 at 3:07
Add a comment
|
2 Answers
Quality comboboxes open their list of options depending on the position on the visible viewport. Either to the top or the bottom.
The list also initially has the same width as the input, extending based on the length of their options. Either to the left or the right, again depending on their position on the viewport.
In this case, the combobox would likely open to the top, not interfering with the fixed toolbar on the bottom.
In all cases should the option list be above all other elements in z.
Above the sticky bar (I assume you mean z-axis). Otherwise the sticky bar covers the dropdown, making handling difficult.
Whenever the user opens a dropdown their focus is on it, not on the page as a whole.
-
i agree. however i'm wondering if the user keeps the drop down open and scrolls, will the dropdown move along with the scroll? Commented Jan 20, 2022 at 9:36
-
1Depends on where the mouse cursor is and whether the dropdown itself is scrollable. If it is, and the cursor is within the dropdown, then - of course - the dropdown should be scrolled, the rest of the page remains where it is. If the mouse is outside, the dropbox should move with the content, as it "belongs" to the input field it is attached to.– GerdaCommented Jan 20, 2022 at 9:43