Dropdown list positioning appears on select element instead of below select element

Created on 16 July 2025, 3 days ago

Overview

After clicking on the select dropdown, the option list appears above (or on top of) the select element. The expected behavior is that the dropdown list should appear below the select element for better usability and accessibility.

Proposed resolution

User interface changes

🐛 Bug report
Status

Active

Version

0.0

Component

… to be triaged

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @mayur-sose
  • 🇬🇧United Kingdom jessebaker

    This seems to only be an issue in Chrome on my Mac. Firefox renders selects with the native browser
    element styling so the position of the options list is as expected.

  • @jessebaker The provided screenshots are from the Chrome browser, even the same issue with the select element also occurs in Safari.

  • 🇬🇧United Kingdom jessebaker
  • 🇬🇧United Kingdom jessebaker

    I adjusted the options dropdown position (only in Chromium browsers where this styling is available) to be more "traditional" and appear directly below the select element.

    Firefox still shows the default Mac/Browser styling as we don't have control over that.

  • Pipeline finished with Success
    3 days ago
    Total: 940s
    #549926
  • 🇫🇮Finland lauriii Finland

    Isn't the behavior where selects appear on top of the element the default browser behavior?

  • 🇺🇸United States bnjmnm Ann Arbor, MI

    The positioning over the select element itself is how the Radix selects we used worked so it's been that way since it was added early December 2024, and if it's taken this long to be reported as a problem perhaps it should not be categorized as such.

    When we switched to native we attempted to match the Radix styling as much as possible, but Firefox does not yet support the selectors necessary to do that. I had anticipated the Firefox deviation possibly showing up in the issue queue, but not so much the opposite.

    Given that this was part of the initial designs, and there's more thorough designs on the way if we're now finding this objectionable 8 months in, I'm inclined to close this as "works as designed".

  • 🇬🇧United Kingdom jessebaker

    @laurii the issue is that if you customise the look (background colour, border, rounded corners etc) of the "picker" (the dropdown that opens with the list options when you click the select) then you lose the positioning of the element (which is dictated by the OS I believe). So the options are

    1. Have the picker look like the browser/os native in both look and feel and position
    2. Have the picker with a custom look and feel, but without control over the position (it just appears below like a more traditional drop down element, or offset by a fixed amount of pixels).
Production build 0.71.5 2024