ui
ui copied to clipboard
Published
20 hours ago •
shadcn-ui
shadcn-ui
dropdown don't have background
Hi,
if I use the dropdown in my app I get only a dropdown menu without a background.
Here my code:
<div data-testid={`machine-basic-information-more-menu-${index}`} >
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="h-8 w-8 p-0"
>
<span className="sr-only">
Open menu
</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
data-testid={`machine-basic-information-delete-btn-${index}`}
onClick={() => {
storageStore.deleteBlob(
document.id ? document.id : ''
)
}}
>
{t('documents.delete')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
Can you create a repository with an example of the problem? I tested it here and it is working fine
https://github.com/shadcn-ui/ui/assets/13812512/bf9aec72-6bc4-45e7-ac7c-14bbbb22270a
I just copied your code and remove some lines
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => {
console.log("exemplo")
}}
>
delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
I had the same problem.
It turned out that I was importing @radix-ui/react-dropdown-menu instead of @/components/ui/dropdown-menu.
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.
Hi guys.. I have the same problème in my project :S
But i give more details :
my package.json :
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.363.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet-async": "^2.0.5",
"react-router-dom": "^6.23.1",
"swr": "^2.2.5",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1",
"zustand": "^4.5.2"
},
"devDependencies": {
"@types/node": "^20.12.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.11.0",
"@typescript-eslint/parser": "^7.11.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"vite": "^5.2.12"
}
}
import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: '127.0.0.1',
},
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
return (<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
<Sheet>
<SheetTrigger asChild>
<Button size="icon" variant="outline" className="sm:hidden">
<PanelLeft className="h-5 w-5" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="sm:max-w-xs">
<nav className="grid gap-6 text-lg font-medium">
<Link
to="#"
className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
>
<Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
<span className="sr-only">Acme Inc</span>
</Link>
<Link to="#" className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground">
<Home className="h-5 w-5" />
Dashboard
</Link>
<Link to="#" className="flex items-center gap-4 px-2.5 text-foreground">
<ShoppingCart className="h-5 w-5" />
Orders
</Link>
<Link to="#" className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground">
<Package className="h-5 w-5" />
Products
</Link>
<Link to="#" className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground">
<Users2 className="h-5 w-5" />
Customers
</Link>
<Link to="#" className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground">
<LineChart className="h-5 w-5" />
Settings
</Link>
</nav>
</SheetContent>
</Sheet>
<Breadcrumb className="hidden md:flex">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to={subPath}>{section}</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{/*<BreadcrumbSeparator/>*/}
{/*<BreadcrumbItem>*/}
{/* <BreadcrumbLink asChild>*/}
{/* <Link to="#">test</Link>*/}
{/* </BreadcrumbLink>*/}
{/*</BreadcrumbItem>*/}
</BreadcrumbList>
</Breadcrumb>
<div className="relative ml-auto flex-1 md:grow-0">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input type="search" placeholder="Search..." className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]" />
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="overflow-hidden rounded-full">
<img src="/vite.svg" width={36} height={36} alt="Avatar" className="overflow-hidden rounded-full" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>)
- I take the code in exemple with Blocks
- I use React 18 with Vite.js with a template : react-swc-ts (react + SWR + typescript)
- I'm not a tailwind expert, but I'm pretty familiar with scss.
thanks in advance, if you have the time to investigate a little ^^ as for me, I'll keep looking and I'll come back to write the solution I find ;)
Thanks for all the work done with shadcn/u
