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
DUFEIL Philippe
530
Styling custom theme banner
posted

Hello,

I use a custom theme like this example and it works very well. 

https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-editing#import-theme

my css is like this :

$custom-banner-theme: banner-theme(
  $banner-background: rgb(255,255,255,0),
);


:host::ng-deep {

  @include progress-circular($custom-theme);
  @include banner($custom-banner-theme);
However, the style does not work when my grid is used in an igx-dialog. Is it a bug ?
How to apply the theme also when the grid is in an igx-dialog ?
Best regards,
Philippe DUFEIL
Parents
  • 700
    Verified Answer
    Offline posted

    Hello Philippe,

    Thank you for posting into our community!

    I have been looking into you question and after an investigation, I was able to reproduce the described behavior and determined that the reason for the styles not being reflected is due to the igx-grid in the igx-dialog not being descendant of the component host - it is currently displayed in the default overlay outlet, at the end of the document's body.

    As mentioned in our Scoped Component Styles topic, when scoping styles for elements that are displayed in the overlay, it is needed to specify the position of the overlay “outlet” in the DOM. CSS rules that are scoped require a specific hierarchical structure of the elements - the overlay content should be displayed in the correct context of the styles.

    Having this in mind, what I could suggest is defining custom overlaySettings with defined “outlet” property and providing these settings to the open method of the dialog.

    Additionally, in order to demonstrate my suggestion, I have prepared a small sample where I am using the above approach. On my side, everything works as expected and when opening the igx-dialog on button click the igx-grid has custom styles applied.

    Please test this approach on your side and let me know if you need any further assistance.

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer

Reply Children