Forums Ignite UI for Angular
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
Close
Mike Hovedskov
30
igx-paginator is hidden beneath mat-dialog box
posted

Hey, so i'm trying out this ignite ui thing for angular, and it looks great! Although, i have a case where i have to have a igx-hierarchical-grid on a dialog box. For this i am using angulars mat-dialog to open this dialog. This works great untill i have to change the pagination. The dropdown is there with the data inside, altough it is situated beneath the dialog box. Is there an easy fix to this? I've tried scouring the internet for answers the last week, but haven't found anything which helped me further.

I firstly thought it was a z-index issue, but after combing through stackoverflow and tried everything i could find, nothing worked. Hoping you guys have had to do the same thing as me!

Thanks in advance!

Parents
No Data
Reply
  • 2560
    Offline posted

    Hello Mike,

    Thank you for posting to Infragistics Community!

    I have been looking into your question and created a small sample with an IgxHierarchicalGrid having pagination enabled and placed within an Angular Material Dialog in an effort to reproduce the described behavior. The sample uses the latest IgniteUI for Angular release, as well as the latest Angular Material version (13.1.1). On my side everything is working as expected and the paginator’s dropdown is correctly displayed over the dialog window.

    Attached below you will find my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach in in this case. Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

    Additionally, I could also suggest considering using the Ignite UI for Angular Dialog Window. Here you will find a StackBlitz sample demonstrating an IgxHierarchicalGrid with pagination within it.

    Thank you for your cooperation.
    Looking forward to hearing from you.

    Sincerely,
    Bozhidara Pachilova
    Associate Software Developer

    7875.igxhierarchicalgrid-in-dialog.zip

Children
No Data