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

[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]'
>

[rihid]

working good, upvoted!!

[Hadeed-S]

for cases where we have a trigger using input using slots for icons / buttons

<TextField.Root size={size} color={color} variant={variant} placeholder={placeholder} className={className} {...props} > <TextField.Slot side={'left'}>{prefix}</TextField.Slot> <TextField.Slot side={'right'}>{suffix}</TextField.Slot> </TextField.Root>

the content does not span the entire trigger although the input encapsulates the slot, Help would be appreciated

[Kudze]

@LukasKri shouldn't it be w-[var(--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.

[gijzy]

Thank you

[gdgenchev]

sick bro, thanks!