March 29th, 2023

Ensure Radix UI Popover width matches trigger

Learn to match popover width with trigger

I spent the day building a custom combobox using cmdk and @radix-ui/react-popover, but at the end of the day the popover size wasn't following the trigger width.

So by playing around I discovered that the popover injects the --radix-ui-popover-trigger-width css variable ito the popover content.

To fix this I just had to add the following css to my popover content:

standard CSS
.combobox-popover {
  width: var(--radix-popover-trigger-width);
}
with tailwind
import * as Popover from "@radix-ui/react-popover";
 
// later in your code
 
<Popover.Root>
  <Popover.Trigger>
    <Button />
  </Popover.Trigger>
  <Popover.Content className="combobox-popover w-[var(--radix-popover-trigger-width)]">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </Popover.Content>
</Popover.Root>;

Just that! Super simple and easy to fix.

You might also like: