Drawer background scale setup wasnt mentioned in the docs #2905

nahasco · 2024-03-05T01:40:56Z

nahasco
Mar 5, 2024

To enable the nice background scale when the drawer opens, we have to wrap our app with

<div vaul-drawer-wrapper="">
              <div className="relative flex min-h-screen flex-col bg-background">
                        {children}
              </div>
</div>

Although this feature was used in the shadcn/ui website and showcased in the example, it was never mentioned in the docs that we have to add these divs to make it work.

3li7u · 2024-05-14T01:07:43Z

3li7u
May 14, 2024

Well noted, Thanks @nahasco
I noticed a strange behavior when the background gets scaled, some black background color is added to the body tag leading to a change in the theme color.
of course, I can add the bg-background class to the first child element in the body and it will be fixed, but I was wondering why this black background color was added

7 replies

sronnaim Sep 17, 2024

How did you wrap it exactly?

Edit: Nevermind, Vaul does have setBackgroundColorOnScale on its Root component, so I went and edit there

4nur4g Sep 18, 2024

I faced the same issue of black background on opening the drawer. Is there a permanent fix without a workaround?

DVGY Sep 18, 2024

I faced the same issue of black background on opening the drawer. Is there a permanent fix without a workaround?

I don't think so. I have also used the same workround like this

import { ReactNode } from "react";

export const DrawerCSSProvider = ({ children }: { children: ReactNode }) => {
  return (
    <div vaul-drawer-wrapper="">
      <div className="relative flex min-h-screen flex-col bg-background">
        {children}
      </div>
    </div>
  );
};

function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <DrawerCSSProvider>
        <Box className="w-[90vw] h-[90vh] overflow-scroll resize font-sans">
          <Appshell />
          <Toaster />
        </Box>
      </DrawerCSSProvider>
    </ThemeProvider>
  );
}

export default App;

sronnaim Sep 18, 2024

I faced the same issue of black background on opening the drawer. Is there a permanent fix without a workaround?

What I notice is that Drawer adds inline background-color:black styling to the <body> tag. Apparently <Drawer> component generated from the CLI does have properties to costumize how the Drawer would fit your style, one of which is the property
setBackgroundColorOnScale. So I'd say to check there first.

DVGY Sep 18, 2024

I faced the same issue of black background on opening the drawer. Is there a permanent fix without a workaround?

What I notice is that Drawer adds inline background-color:black styling to the <body> tag. Apparently <Drawer> component generated from the CLI does have properties to costumize how the Drawer would fit your style, one of which is the property setBackgroundColorOnScale. So I'd say to check there first.

this also works setBackgroundColorOnScale={false}!!

fmendez89 · 2024-10-20T16:10:51Z

fmendez89
Oct 20, 2024

Just to let you know, on newer versions the prop added to the div has changed.

vaul-drawer-wrapper now is data-vaul-drawer-wrapper

Refer to:
emilkowalski/vaul#411

0 replies

Uh oh!

Drawer background scale setup wasnt mentioned in the docs #2905

Uh oh!

Uh oh!

Replies: 2 comments · 7 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 2 comments 7 replies