search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.82k stars 718 forks source link

How to hide the Dialog on certain breakpoints? #2603

Closed Knaackee closed 3 months ago

Knaackee commented 6 months ago

Hey!

At first, thanks for the great work.

I would like to hide the dialog if the size of the users' window is lower than tailwinds md breakpoint. (I show a Sheet instead).

Since I can't apply classNames to the Dialog.Root I tried many things. But nothing really works completely.

Any idea on how to achieve this?

joaom00 commented 6 months ago

You can just hide the Dialog.Trigger with CSS. The Dialog.Content is mounted only when opened

Knaackee commented 6 months ago

Yeah sure, but I am not using the trigger. I control the open state by myself using the open prop.

micahjonas commented 6 months ago

Hello :)

I'm actually struggle with the same issue. I only want to show the modal on mobile resolution. If I have more screen real estate we should the same form in a sidebar to make the rest of the page still be interactive

benoitgrelard commented 3 months ago

This isn't a primitive concern, it's a styling concern, you can decide to show elements whenever you want, either with CSS. You can even decide to enable functionality based on JS using a resize observer.

etx121 commented 2 days ago

@Knaackee @micahjonas Have you found a solution for that? I can hide the content with tailwind css, but the background from the Dialog is still there.

etx121 commented 2 days ago

@Knaackee @micahjonas Have you found a solution for that? I can hide the content with tailwind css, but the background from the Dialog is still there.

At the end I just found out. I was using shadcnui, and SheetContent is integrating the SheetOverlay and the SheetPortal. You can hide with Tailwind CSS in the className of the Portal and the Overlay then. So in the context of Radix, you can then hide the DialogContent and DialogOverlay