[bug]: Select content breaking the page structure

[SamuelPires1999]

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.

[SamuelPires1999]

Note that the same happens with the Dialog component, its the exact same behavior

[shadcn]

Let me see if I can reproduce this. This is a <Select /> and <Dialog /> on the same page?

[SamuelPires1999]

Sorry if Im late for the reply, but no, the image shows only the select bug, but dialog does the exact same effect.

[stormynight9]

@shadcn This happens even on the docs page

[jeffminsungkim]

+1

Any updates?

[alexjoedt]

+1

[shadcn]

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

[alexjoedt]

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!

[lucasjinreal]

I also got some unwanted result when using Select inside Dialog, the hover effect are gone

[AbyerAli]

i also got the same issue, dialog + select = ui bug

[aidrecabrera]

Same issue here: Dialog + Select.

[dkjym]

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

[vivekascoder]

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.

[erickcestari]

I had the same issue @vivekascoder, but using Dropdown Menu, thanks for sharing the resolution!

[chrisblakely01]

thanks @vivekascoder worked for me

[Sagbyy]

+1

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.