How to set menu full width when using Dropdown and Popover

[lazarus2019]

I already use both Dropdown and Popover in my project. With Dropdown I want it scale full width when screen in mobile version, and Popover I want it keep the static width in every screen dimension.

// Dropdown component
<DropdownMenu.Root>
        <DropdownMenu.Portal>
          <DropdownMenu.Content>
             {content}
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>

// Popover component
<Popover.Root>
        <Popover.Portal>
          <Popover.Content>
             {content}
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>

For full width solution I just override width for [data-radix-popper-content-wrapper] and it's work, but it also effect the popover.

So how to style for each Dropdown or Popover component of Radix for each of them to not effect each other.

[joaom00]

You can use width: 100vw in Dropdown.Content and Popover.Content instead of using data-radix-popper-content-wrapper

[lazarus2019]

You can use width: 100vw in Dropdown.Content and Popover.Content instead of using data-radix-popper-content-wrapper

Oh yes, it's work. Thank you, @joaom00. I think it's the only way to custom for each of them.

[OgDev-01]

Is it possible to use % width based on the parent component? I'm currently facing this issue.
Any help/guide would be appreciated 🙏

[mustafademir-deliverect]

I have the same issue. I want to resize the component width according to the container element.

[mustafademir7]

@OgDev-01 I found another solution for %
I use width: "var(--radix-popper-anchor-width)" and it works perfect

[OgDev-01]

Thanks @mustafademir-deliverect, i'll give it a try 👍

[benoitgrelard]

I use width: "var(--radix-popper-anchor-width)" and it works perfect

This is almost the correct solution (you should use a private popper variable as we expose component-specific ones).
It's even in the docs 😉