- 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.
- Merge request !1310Position options dropdown in Chromium to be beneath the select element → (Open) created by 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.
- 🇫🇮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
- Have the picker look like the browser/os native in both look and feel and position
- 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).