How to grow popover content width to match trigger

[StephenSHorton]

I have a similar question to #1921 but my popover content is too small and doesn't grow to the size of the trigger?

I've got w-full or width: 100% on both my trigger and the content. Is it not possible to do this? Do I have to have a fixed width?

[zahidiqbalnbs]

Check here. https://www.radix-ui.com/primitives/docs/components/popover#constrain-the-content-size

[StephenSHorton]

Thanks, but I'm looking for a dynamic solution that doesn't rely on a set width.

[ajayvignesh01]

This is a dynamic solution tho.

Just add this to your content:

style={{ width: 'var(--radix-popover-trigger-width)' }}

[StephenSHorton]

I stand corrected, thank you!

[ali-sahi]

Thankyou @ajayvignesh01 i have been wrapping my head around with this for a while now and your solution worked.
By the way i still don't know why width:100% is not working. Its working if we define it in pixels.
Do you have any idea?

[LukasKri]

I didn't want to use style, so this worked:

<PopoverContent
      className='w-[--radix-popover-trigger-width]'
>

[Ryanjso]

I am facing the same issue, were you able to identify a solution?

[StephenSHorton]

Yes, the accepted answer is the solution. You need to leverage the --radix-popover-trigger-width css variable. (See here)

[BartekCK]

If you are using Shadcn and Tailwind v4, you can do something like this:

<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)]"> {...} </PopoverContent>

[rgomezv]

This worked for me too in Tailwind V4 with Shadcn.