Double scrollbar appearing on tailwindplus elements activation #1798
Description
What component (if applicable)
- most of the elements components, like https://tailwindcss.com/plus/ui-blocks/application-ui/elements/dropdowns for example
Describe the bug
When activated, it makes a second scrollbar appear. The normal dark-mode scrollbar disappears, but takes up the space it used to take up, and a new light-mode scrollbar appears next to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dropdown + Scrollbar</title>
<script src="https://cdn.tailwindcss.com/"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
</head>
<body class="min-h-screen overflow-y-scroll bg-gray-100 p-8 text-gray-900">
<div class="max-w-md space-y-6">
<h1 class="text-xl font-semibold">Demo</h1>
<el-dropdown class="inline-block">
<button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
Options
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="-mr-1 size-5 text-gray-400">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-menu anchor="bottom end" popover class="w-56 origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Account settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Support</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">License</a>
<form action="#" method="POST">
<button type="submit" class="block w-full px-4 py-2 text-left text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Sign out</button>
</form>
</div>
</el-menu>
</el-dropdown>
<p class="text-sm text-gray-600">
The scrollbar is forced on via <code class="font-mono">overflow-y-scroll</code> on the body.
</p>
</div>
</body>
</html>
Metadata
Metadata
Assignees
Labels
No labels