NOTE: You also need to add a class of "relative" to the DialogPrimitive.Content component to ensure the close / X button renders correctly within the dialog.
I think this shows how important it is to know how libraries and tools you use work under the hood. shadcn/ui is mostly just a wrapper around Radix UI. And Radix UI has explicitly stated in their docs how to make Dialog's content scrollable. It shouldn't be "something that shadcn/ui needs to fix", it's the default behaviour of Radix UI with a suggested way to make Dialog scrollable. So "read the docs", I guess?..
Good point. Altho just using Radix UI's method alone doesn't actually make the shadcn one scrollable. You still need to do the extra steps. Either way, who has time to find the answer in the docs in 5 mins when they can spend 2 hours pulling their hair out?
To prevent the animation from breaking, do not remove the attributes "left-[50%] top-[50%]" and "translate-x-[-50%] translate-y-[-50%]", just change the "fixed" attribute for "absolute", that will make everything work well without really breaking. sorry for my english, i use google transalte.
I'm not a big fan of that approach because it means the content is scrollable rather than the actual dialog. Also scrolling will only work when triggered inside the content area rather than from anywhere on the screen.
Interesting to see how others have fixed this issue, this was one of the first things i had fixed starting my web dev adventures, brings back nostalgia for sure, thanks for sharing!
also the datepicker component has some problems. when I create a calender it gives it doesn't give me year and month select. it is a big issue that's why I use another frameworks!
Dude, Im just straight up bookmarking this. It was driving me crazy, this is specially annoying when you're using a select or command component inside a dialog. This and the pointer-events: none in the body that radix ui does is so annoying
do you know a way how to deal with overflowing submenu in dropdown? on mobile, vertical orientation, dropdown takes almost all width and submenu oppens at the side so it is mostly clipped
I already highlighted this in a comment when I posted the video: "NOTE: You also need to add a class of "relative" to the DialogPrimitive.Content component to ensure the close / X button renders correctly within the dialog."
not the same. There is no overlay for dropdown. There is a popper. I wish someone would show a way to scroll a dropdown on overflow or position it differently
i find a better solution, i put forms in the dialog so i put this : ' z-50 max-h-[90vh] overflow-auto in dialog content and this 'fixed py-10 grid place-items-center in dialog overlay
havent seen your other videos but if figuring out some of most basic css properties on this component to ”fix” it took ”ages”, i wouldnt wanna learn from you.
NOTE: You also need to add a class of "relative" to the DialogPrimitive.Content component to ensure the close / X button renders correctly within the dialog.
thanks buddy
thanks for the info, but PLEASE pin your comment.
I was about to comment this. Maybe you can add a note in the video, this is very helpful. Thank you for the help!
I think this shows how important it is to know how libraries and tools you use work under the hood. shadcn/ui is mostly just a wrapper around Radix UI. And Radix UI has explicitly stated in their docs how to make Dialog's content scrollable. It shouldn't be "something that shadcn/ui needs to fix", it's the default behaviour of Radix UI with a suggested way to make Dialog scrollable. So "read the docs", I guess?..
Good point. Altho just using Radix UI's method alone doesn't actually make the shadcn one scrollable. You still need to do the extra steps. Either way, who has time to find the answer in the docs in 5 mins when they can spend 2 hours pulling their hair out?
Maybe learn html and css? It's a basic mistake hahaha
The first time I saw this video I knew it would be useful to me in the future, 2 months later i'm here, thank you!
Glad it was helpful!
To prevent the animation from breaking, do not remove the attributes "left-[50%] top-[50%]" and "translate-x-[-50%] translate-y-[-50%]", just change the "fixed" attribute for "absolute", that will make everything work well without really breaking.
sorry for my english, i use google transalte.
Your comment was really helpful, thank you!
you don't need all that, you can just add a max-h-[85dvh] overflow-y-auto to the primitive.content and you're done.
I'm not a big fan of that approach because it means the content is scrollable rather than the actual dialog. Also scrolling will only work when triggered inside the content area rather than from anywhere on the screen.
All comes down to personal preference tho. The method outlined in the video is my preference.
@@WebDevEducation fair enough 🙏
thank you, i like this approach much better
Interesting to see how others have fixed this issue, this was one of the first things i had fixed starting my web dev adventures, brings back nostalgia for sure, thanks for sharing!
You are amazing… I did this last week and i nearly ran mad!
Good to know. Was just trying to deal with this. Had to sort out that max width first...
also the datepicker component has some problems. when I create a calender it gives it doesn't give me year and month select. it is a big issue that's why I use another frameworks!
I also created a video on the shadcn ui calendar:
ruclips.net/video/cY5RMVj2GtU/видео.html
You're the giants we stand on. Thank you.
I can't take credit for the fix but happy that I was able to share it with people who may otherwise not have seen it 🙏
Dude, Im just straight up bookmarking this. It was driving me crazy, this is specially annoying when you're using a select or command component inside a dialog. This and the pointer-events: none in the body that radix ui does is so annoying
Need a video on how to contribute to this libraries from scratch
Please also address the issue where on mobile screen when we open the keyboard to type half of the dialogue hides behind the keyboard
What if you have horizontal small width? I also tried to fix horizontal bu cannot make it work correctly with cross close button icon
Thanks, I acctualy need this fix!
Thank you so much. you saved my time. thank you
One has to wonder why the ShadCN UI isn't updated properly.
I'm starting to avoid using it and instead applying DaisyUI styles to Radix directly.
Are you getting states errors in the browser console when using inputs inside the modal?
do you have a fix for components like Sheet and Toast having transparent background?
thank you so much sir for making videos and helping community.
🙏
do you know a way how to deal with overflowing submenu in dropdown? on mobile, vertical orientation, dropdown takes almost all width and submenu oppens at the side so it is mostly clipped
You saved my life, thank you!
🙏
i did max-h-[90vh] overflow-y-auto on the dialogContent, and its fixed. no need to move this or that.
That's one solution but doesn't produce the result shown in the video, which is the one I needed.
There is still abug in your implementation. Cross button i snot displayed correctly
I already highlighted this in a comment when I posted the video:
"NOTE: You also need to add a class of "relative" to the DialogPrimitive.Content component to ensure the close / X button renders correctly within the dialog."
Saved me!! Thank you
Thanks for this. I have to follow your page. Thanks
i wasted two days then thought there is you tube not just chatgpt
I think the same problem is present for the drop down menu
not the same. There is no overlay for dropdown. There is a popper. I wish someone would show a way to scroll a dropdown on overflow or position it differently
i find a better solution, i put forms in the dialog so i put this : ' z-50 max-h-[90vh] overflow-auto in dialog content and this 'fixed py-10 grid place-items-center in dialog overlay
Thank you so much!
bro just make a PR
Thank you 🙏
thank you sir
Thank you
max-hans 🙏
shadcn have abusive relationship with relative and absolute lol
😆
thanks.
🙏🙏
havent seen your other videos but if figuring out some of most basic css properties on this component to ”fix” it took ”ages”, i wouldnt wanna learn from you.
Then don't :)
You don't have to be rude about it @alyxx997. Sometimes the most basic things, are the most difficult to resolve quickly.
Nothing is broken then!!🤔 Click bait😒