Hello,
I am using an IgxDialog and need to be able to edit the styles (e.g. make the window wider, change the text/background color of the title, change the design of the buttons) and I am unable to get it to work. I have follow the instructions for styling in the documentation page here. Additionally, I have copied-pasted the code from this example and this example into my project and it still won't work.
When I copied the method from the documentation page, my styles just don't reach the dialog window. The window opens up without my styling and I can see that the elements for the dialog don't contain my classes or edit.
When I copied the two methods from the stackblitz examples, the window doesn't even open. What I have found is that if I comment out the line "outlet: this.outlet" or "outlet: this.myDiv" in the OverlaySettings, the window will appear but obviously without any of the style edits. That's the only change I need to make in order for the dialog to appear on click, if I don't remove that line then no other change I make will have the dialog appear.
My package.json is showing:
Hello Feargus,
Thank you for reaching out.
Have you included all the necessary imports to your project in order for themes to take effect? Please check the following page from our documentation about themes and see if you are missing any.
In case you are not using a theme as in the second sample linked, just make sure you are placing the style classes in ng-deep, as the classes are encapsulated and they wont reach otherwise.
I have modified the second sample which does not use themes, so copy pasting from it will work:
https://stackblitz.com/edit/dialog-custom-width-jcxuut?file=src%2Fapp%2Fdialog-sample-1%2Fdialog-sample-1.component.scss
Please check the sample, and in case you still have issues, just let me know.
Sincerely,
Tihomir TonevAssociate Software DeveloperInfragistics
Thanks for the response. I have copied and pasted your sample into my app and see the exact same issue. When I click the button no dialog appears. If I comment out the line "outlet: this.myDiv" then the dialog does appear but without any of the styles.
I have successfully edited the styles of other Igx components in my app, I am only facing this issue with the Dialog component.
Have you included all imports for the IgxOverlayService? Do you get any errors when you compile? If you are copy pasting from stackblitz and it is not working on your end while working there, you probably missed to add element to your html or add an import.
Please also check the following page from our documentation as well:
https://es.infragistics.com/products/ignite-ui-angular/angular/components/overlay-styling
Hi,
I have imported IgxOverlayService in the module and the component and included it in the constructor (though it is unused) just like the example in the link you have provided and I still face the same issue.
I have created the following sample using igxOverlaySettings to open a dialog with left to right animation:
https://stackblitz.com/edit/dialog-slideinleft-sample?file=src/app/dialog-sample-1/dialog-sample-1.component.ts
In case this does not help, can you please create a sample on stackblitz and send it so we can review what might be going wrong.
Tihomir TonevAssociate Software DeveloeperInfragistics