You saved me. I struggled a lot with angular material mat-menu and matToolTip as they refused to display correctly next to the parent component. That import in the global styles file did the trick. Thank you!
Nice video. Thanks for sharing. What should I do if, when I click a button, an overlay appears. Then, when I click another button, the previous overlay closes, and the new overlay opens?
I just tried your CDK Overlay Basics example in stackblitz. However, I noticed that after clicking the button to open the overlay, when I click the same button again, I cannot close the overlay. I have to click elsewhere to close it. I'd like to ask what the reason for this is.
Ah I see, what was happening in that example was that the button click would actually trigger it to close and then immediately reopen. I've updated that example to include stopPropagation() on the overlayOutsideClick event which is what causes the overlay to close. This now allows you to click anywhere outside, including on the button without propagating that event to the button itself. Hope that helps.
good content, i am using this overlay with portal to create modals with components. but i am having the issue that when the modal ( the component that renders inside the overlay with the content that i want to show) is higher than the viewport it goes outside the view and i cannot scroll down to see all the content of the modal (if i allow scrollstrategy it scrolls the page but it dosent scrolls the modal). in the end i use overflow inside the component but that is not the behaivor i want. is there a solution to that ?
My hunch is that you may be looking for the cdkConnectedOverlayLockPosition input. If you set this to true it will allow it to scroll with the rest of the content I believe.
This is a great question! The native dialog is super powerful and the best way to go if it works for you. There are several subtle differences with the CDK Overlay and then there are some pretty big differences too, the biggest of which is the "connected position" concept for creating popups. The control that we have for automatically positioning popups relative to the origin with additional fallback positions is something that is, at least as far as I know, not yet possible with a native dialog. There are probably too many things to list out here, but you should check out some of the other videos I've created on the Overlay. They may help you to understand the benefits a little more. ua-cam.com/play/PLp-SHngyo0_iun9oglT2boNYebJ1Yv-GT.html
Hello! What to do if my overlay is inside a scrollable dialog? So when the dialog gets scrolled the overlay doesnt stay relevant to the button that opened it, is it fixable?
There are different ways to handle overlays when scrolling. In your case it sounds like you may want to use the "close" scroll strategy. Take a look at this video to learn more: ua-cam.com/video/UtptUw0XpcQ/v-deo.html.
It was the most simple and easy video about Overlay that I found, thanks Brian for your time to record and share this knowleadge with the community
You saved me. I struggled a lot with angular material mat-menu and matToolTip as they refused to display correctly next to the parent component. That import in the global styles file did the trick. Thank you!
Nice video. Thanks for sharing. What should I do if, when I click a button, an overlay appears. Then, when I click another button, the previous overlay closes, and the new overlay opens?
Good question. Just to clarify, you want to have two overlay's open at the same time?
@@briantreese No, I just want one overlay open at a time.
I just tried your CDK Overlay Basics example in stackblitz. However, I noticed that after clicking the button to open the overlay, when I click the same button again, I cannot close the overlay. I have to click elsewhere to close it. I'd like to ask what the reason for this is.
Ah I see, what was happening in that example was that the button click would actually trigger it to close and then immediately reopen. I've updated that example to include stopPropagation() on the overlayOutsideClick event which is what causes the overlay to close. This now allows you to click anywhere outside, including on the button without propagating that event to the button itself.
Hope that helps.
Thank you so much. Appreciate it!
Great video. Thank you for your time.
good content, i am using this overlay with portal to create modals with components.
but i am having the issue that when the modal ( the component that renders inside the overlay with the content that i want to show) is higher than the viewport it goes outside the view and i cannot scroll down to see all the content of the modal (if i allow scrollstrategy it scrolls the page but it dosent scrolls the modal).
in the end i use overflow inside the component but that is not the behaivor i want. is there a solution to that ?
I think I understand your issue but could you provide a Stackblitz example? Then I can try to take a look.
My hunch is that you may be looking for the cdkConnectedOverlayLockPosition input. If you set this to true it will allow it to scroll with the rest of the content I believe.
I also have this video that may help as well: ua-cam.com/video/UtptUw0XpcQ/v-deo.html
Whats bennefits does cdk overlay have thay you dont have with a nativr ?
This is a great question! The native dialog is super powerful and the best way to go if it works for you. There are several subtle differences with the CDK Overlay and then there are some pretty big differences too, the biggest of which is the "connected position" concept for creating popups. The control that we have for automatically positioning popups relative to the origin with additional fallback positions is something that is, at least as far as I know, not yet possible with a native dialog.
There are probably too many things to list out here, but you should check out some of the other videos I've created on the Overlay. They may help you to understand the benefits a little more. ua-cam.com/play/PLp-SHngyo0_iun9oglT2boNYebJ1Yv-GT.html
@@briantreese Your videos are insanly well made. Please keep it up :)
@@briantreese Thank you!
Hello! What to do if my overlay is inside a scrollable dialog? So when the dialog gets scrolled the overlay doesnt stay relevant to the button that opened it, is it fixable?
There are different ways to handle overlays when scrolling. In your case it sounds like you may want to use the "close" scroll strategy.
Take a look at this video to learn more: ua-cam.com/video/UtptUw0XpcQ/v-deo.html.
Great video! Thank you!
how we can change the backdrop color
You should just be able to add something like .cdk-overlay-backdrop { background-color: red } to your globally included style sheet.
Very good video!
Nice video 👍 Could you do one on CDK layout?
I actually have one already here: ua-cam.com/video/aKxFbZG_3go/v-deo.htmlsi=kc6HyTb4r0-JDNpt