Hi , we are using multiple child components in one parent and each child component uses igx dialog . each have there own width , height , overflow etc. To make some customization we are overriding igx dialog window class.
Im having issues too with styling need help quick.
It won't change the dialog theme (i want to make it transparent) i need help i tried everything. \:host ::ng-deep, i don't have any compile issues.Only thing that worked is::ng-deep .igx-dialog__windows background: transparent !important box-shadow: none !importantBut this way it changes to all my igx-dialogs what i don't want. Thanks in advance for help.
Hello,
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
thank you !!! i missed the igxOverlayOutlet and that hint solved it.
As you can see from the created sample, I am using two Angular components that I add in one parent component and each containing one igx-dialog component, wrapped in a div element with an igxOverlayOutlet directive. After that, in each component in the scss file, I create a :host in which there is ::ng-deep and in it I select the igx-dialog window itself with the .igx-dialog__window class and I set custom styles to it. On my side everything works as expected and as you can see from the created sample and from the provided video, I am able to change the width and height of each igx-dialog component from any Аngular component as well as add additional styles to it. I am using latest Ignite UI Angular version ^15.0.0.
What I could advise you is to make sure that you have gone through all the steps that I have described in my previous answers and that you have completed them correctly. Also, in this special case, it is important for you to wrap the igx-dialog component itself in another element that contains the igxOverlayOutlet directive so that the overlay can be accessed and styled.
Here you will find my sample for your reference. 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. Please provide more information on how you create your components, where the igx-dialog components are located as well as how you try to style them. Additional information, screenshots, video or code snippets will be of great help, and the best option is to provide your sample where you reproduce the described scenarios.
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.
Thank you for your cooperation.
one thing i can notice css is rendered in the DOM for that component but the igx dialog rendered is generated generically with out mapping to style sheet which is rendered as _ngcontent-sjp-c396.