How to adapt the dropdown content width to Dropdown Tigger?

[vaibhavsingh97]

Hey 👋

I need help making the Dropdown Content width 100% of the Dropdown triggers width. I had looked over the documentation and couldn't find any example.

The issue I am stuck at is that DropdownContent is wrapped with div by radix to position it, and because of that, I cannot think of a solution where I can make the width adapt to the parent trigger. (counter number 2)

Reference Code: https://github.com/nightwatchjs/html-reporter/blob/d79abf669d22cac4baf97dc2c5c847b1f5072d04/src/components/EnvironmentDropdown/index.tsx

[joaom00]

Hi @vaibhavsingh97,

You can use --radix-popper-anchor-width to achieve this, but I think a dropdown isn't the best component here because I can see that you have a search inside the dropdown content and that will conflict with typeahead feature. So would I say a Popover is better here? because I can see too it has a chevron icon on the right and that would be the trigger but you want to position the content relative to the EnvironmentSelectorWrapper and Popover component exposes an Anchor part to achieve that.

The --radix-popper-anchor-width isn't documented as in Select as --radix-select-trigger-width, so I don't know if using the css variable is recommended. Perhaps they have a good reason for not exposing it in Dropdown component.