ui: [bug]: Select content breaking the page structure

When using the select component, opening the select content completely breaks the entire page, and I don’t know if the problem is actually the component itself or if I forgot something when implementing it.

the code for it is the following:

       <Select>
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Select" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="DEPRIVED">Deprived</SelectItem>
            <SelectItem value="KNIGHT">Knight</SelectItem>
            <SelectItem value="MAGE">Mage</SelectItem>
            <SelectItem value="CLERIC">Cleric</SelectItem>
            <SelectItem value="ARCHER">Archer</SelectItem>
          </SelectContent>
        </Select>

And this is the behavior that I get when clicking the trigger.

About this issue

Original URL
State: open
Created a year ago
Reactions: 1
Comments: 15 (1 by maintainers)

Most upvoted comments

in my case it’s because I had mx-auto on body, to solve it I created a div inside the body and added mx-auto there.

vivekascoder on Jan 16, 2024

Any updates?

jeffminsungkim on May 5, 2023

Specifying max-width and margin: auto to body would reproduce this.

dkjym on Dec 31, 2023

Hey @shadcn, unfortunately I could not reproduce the error in your sandbox, but i could in my own and i found out where the error comes from.

EDIT: I am using react with vite

In my case i have a PanelGroup (from react-resizable-panels) where i set the position: absolute;. When i remove the position property, the Select works fine. Furthermore, when i leave position: absolute in my PanelGroup and add following props tho the body element it works also fine.

body {
  position: relative;
  min-height: 100vh;
}

Sandbox See main.tsx and app.module.css

Thank you!

alexjoedt on Jul 13, 2023

Can you help me reproduce this? Here’s a CodeSandbox link: https://codesandbox.io/p/sandbox/github/shadcn/next-template-debug/tree/main

shadcn on Jul 13, 2023