Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
125
Strange issues with Overlay component
posted

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.

Parents Reply
  • 720
    Offline posted in reply to Alex P

    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.

Children
No Data