Strange issues with Overlay component

I used a basic sample i found on stackblitz and tried to make it work for me but ran into several issues. A major one is that any angular material control on the page i am showing does not work correctly. Below find a copy of the modified stackblitz

https://stackblitz.com/edit/ignite-ui-overlay?embed=1&file=src/app/overlay-main-1/overlay-main-sample-1.component.ts

Here is the complete list of issues i see..

a) why does none of the controls i use on that form work correctly like when i click on calendar it does not show nor does it when i go and enter text in relationship box, it does not show the list. Or even the basic dropdown does not show.

b) how can I specify the size of the Overlay so it has either x% of page or a width  ?

c) How can i make it that if the form in the overlay is larger then the overlay that it will show scroll bars ?

I included amodal version of the form so you can see what i mean with the calander etc not working in the overlay mode.

Hello Alex,

Thank you for contacting Infragistics Community.

Please note that as stated within the Angular Material Official Documentation, by default the overlay container is appended directly to the document’s body. Having this in mind, it is expected that components will not be visible if an igxOverlay is opened since it is displayed above the body.

After further investigation, I found a discussion that I believe you will find very helpful: https://stackoverflow.com/questions/55288559/angular-cdk-overlay-change-default-overlay-container

Here you can find an updated version of the provided sample. Please note that this is not a full fledged sample, however it can be used as a starting point.

Please keep in mind that this is entirely related to the Angular Material, which is beyond the scope of Infragistics Support.

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.

So based on your answer i have the following takeaway. Angular material components will not work reliable (like Calendar) etc when using Infragistics overlay ? That's seems to be the take away her. The interesting part is that if i use angular Materials CDK overlay I do not have these issues and all controls render as expected.

https://stackblitz.com/edit/angular-material-cdk-overlay-sample1-yjjd7j?file=app/app.component.ts

Hello Alex,

Thank you for getting back to me!

I believe that you will find the following sample I have prepared for you very helpful. As you can observe an igxOverlayService is used for visualizing the modal container. Within this modal container I have placed an igxDatePicker (which internally uses the igxOverlayService). As you can observe without providing any additional settings everything is working as expected (the modal container is displayed over the body and the igxDatePicker container is displayed over the modal container). The reason for this behavior is that both are using the igxOverlayService which handles everything behind the scenes.

I guess that the same would be true for Angular Material as well.
Having said that, using a combination of Material and Infragistics components is possible, however, it will require a manual implementation overlays sync. A possible approach is demonstrated in the stackoverflow thread provided in my previous response.

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.