CODEWITHSUNDEEP
reactjsshadcnui
Kernier
Kernier

Reputation: 13

Shadcn dialog became blurred

I have no idea why sometimes my shadcn dialog component became blurred as below enter image description here

When I switch the switch component off then its unblurred. So it seems that changing the size of dialog make it blurred. How to avoid that?Below unblurred one:

enter image description here

Upvotes: 0

Views: 1896

Answers (4)

Shahtaz Rahman
Shahtaz Rahman

Reputation: 11

The basic reason for this problem occurs because of using translate property. translate in here is being used for centering the content body. So if you could center the content body using grid or flex this blurry problem wouldn't occur.

So, you could re-write DialogContent like this.

const DialogContent = React.forwardRef(
  ({ className, children, ...props }, ref) => (
    <DialogPortal>
      <DialogOverlay />
      <div className="fixed z-50 inset-0 flex items-center justify-center">
        <DialogPrimitive.Content
          ref={ref}
          className={cn(
            "relative grid w-full max-w-lg gap-4 border border-white/10 bg-foreground p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[-2%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[-2%] sm:rounded-lg",
            className
          )}
          {...props}
        >
          {children}
          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
            <X className="h-4 w-4" />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        </DialogPrimitive.Content>
      </div>
    </DialogPortal>
  )
);

Upvotes: 0

Choc.
Choc.

Reputation: 68

data-[state=open]:animate-in will cause the blur in Dialog, Popover, DropdownMenu, Select, and ContextMenu, etc.

Remove the data-[state=open]:animate-in class from the Content of those components will solve the blur issue.

Upvotes: 0

محمود عادل - Mahmoud Adel
محمود عادل - Mahmoud Adel

Reputation: 1

remove rounded-md and it will work

Upvotes: -1

rugy
rugy

Reputation: 256

Changing translate-y-[-50%] to translate-y-[-53%] in dialog.tsx component file removed the blurriness in most cases. it still happens when i change focus on a TinyMCE input I have within the dialog.

  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "[&>div]:p-6 overflow-hidden !p-0 pt-[4.5rem] fixed left-[50%] top-[50%] z-20 grid w-full max-w-2xl translate-x-[-50%] translate-y-[-53%] border border-slate-200 bg-white shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md md:w-full dark:border-slate-800 dark:bg-slate-950",
        className
      )}
    data-test="dialog-content"
      {...props}
    >
    {children}
      
    
    </DialogPrimitive.Content>
  </DialogPortal>
))```

Upvotes: 2

Related Questions