Comments (10)
This worked for me, add a portal and adding z-[60]
, this works also for shadow roots:
import * as Portal from '@radix-ui/react-portal';
const ToastViewport = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Viewport>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
<Portal.Root className="fixed z-[60]">
<ToastPrimitives.Viewport
ref={ref}
className={cn(
'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
className
)}
{...props}
/>
</Portal.Root>
));
from ui.
This worked for me, add a portal and adding
z-[60]
, this works also for shadow roots:import * as Portal from '@radix-ui/react-portal'; const ToastViewport = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Viewport>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> >(({ className, ...props }, ref) => ( <Portal.Root className="fixed z-[60]"> <ToastPrimitives.Viewport ref={ref} className={cn( 'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', className )} {...props} /> </Portal.Root> ));
somehow this works for me but i am getting hydration error like of matching divs how can we fix it ?
from ui.
You are right.
I found a solution though, to use a custom container for the portals.
radix-ui/primitives#760 (comment)
This is how i'm using it now, but not sure if it's the cleanest way to do it:
export interface CreateDocumentProps {
open: boolean;
onOpenChange(open: boolean): void;
}
export const CreateDocument: React.FC<CreateDocumentProps> = ({
open,
onOpenChange,
}) => {
const [container, setContainer] = React.useState(null);
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-[425px]" container={container}>
content
</DialogContent>
</Dialog>
<div ref={setContainer} />
</>
);
};
And this is the dialog content
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, container, ...props }, ref) => (
<DialogPortal container={container}>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"animate-in fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full scale-100 gap-4 bg-white p-6 opacity-100 sm:max-w-lg sm:rounded-lg",
"dark:bg-slate-900",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
<MyIcon name="X" className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
from ui.
Both AlertDialog and Toast have a z-index of 50. But AlertDialog is located below Toast in the HTML structure that's why Toast is showing behind AlertDialog.
from ui.
Still, i have put the toast provider bellow all components, like the docs suggested, as demonstrated in the codesandbox
from ui.
It's fixed though if you put a z-[60]
in the toast viewport
from ui.
You can check the HTML order of the Dialog
and Toast
in the dev tools. Probably Dialog
always comes after Toast
because of Dialog.Portal
which is used here in DialogContent
and always moves Dialog
at the very bottom. So bumping z-index
here on ToastViewport
appears as the solution.
from ui.
This worked for me, add a portal and adding
z-[60]
, this works also for shadow roots:import * as Portal from '@radix-ui/react-portal'; const ToastViewport = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Viewport>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> >(({ className, ...props }, ref) => ( <Portal.Root className="fixed z-[60]"> <ToastPrimitives.Viewport ref={ref} className={cn( 'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', className )} {...props} /> </Portal.Root> ));
This worked for me also, thanks a lot
from ui.
This worked for me, add a portal and adding
z-[60]
, this works also for shadow roots:import * as Portal from '@radix-ui/react-portal'; const ToastViewport = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Viewport>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> >(({ className, ...props }, ref) => ( <Portal.Root className="fixed z-[60]"> <ToastPrimitives.Viewport ref={ref} className={cn( 'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', className )} {...props} /> </Portal.Root> ));
somehow this works for me but i am getting hydration error like of matching divs how can we fix it ?
I was able to get around the hydration error by wrapping the component in a custom ClientOnly
wrapper component.
from ui.
This worked for me, add a portal and adding
z-[60]
, this works also for shadow roots:import * as Portal from '@radix-ui/react-portal'; const ToastViewport = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Viewport>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> >(({ className, ...props }, ref) => ( <Portal.Root className="fixed z-[60]"> <ToastPrimitives.Viewport ref={ref} className={cn( 'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', className )} {...props} /> </Portal.Root> ));
somehow this works for me but i am getting hydration error like of matching divs how can we fix it ?
This solution resolved my problem with Dialog and Sheet. Thanks!
from ui.
Related Issues (20)
- [bug]: Issue when using cloudflare zero trust (with extended tls decryption)
- [bug]: The command is disabled and never selectable.
- [bug]: The source code for the combobox form has a bug
- [bug]: Wrong selector for select component placeholder HOT 4
- [bug]: Script not found HOT 2
- [Accessibility]: Use <input list=""> or <select multiple > instead of combo-box to ensure accessibility across all devices
- [feat]: Sheet compatibility with Resizable
- [bug]: Multiple RadioGroup with overlapping Item values will conflict HOT 1
- [feat]: Fix the bun commands HOT 1
- [bug]: Error: 'React' is not defined. no-undef in sonner component
- [bug]: Error in documentation of combobox HOT 4
- [bug]: CLI for vite doesn't include index.html HOT 1
- [bug]: Unable to install HOT 3
- [bug]: AlertDialog does not come up on trigger click when in full screen mode of browser HOT 2
- [bug]: Sheet + Sonner toaster - toasts don't open up on mouseover HOT 1
- [bug]: Error when running npx shadcn-ui@latest init and npx shadcn-ui@latest add button with Node.js v20.13.1
- [feat]: Need a Rating component HOT 1
- [feat]: new date on click HOT 1
- [feat]: Event Calendar
- [bug]: slect lags when use many options HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.