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
Perunthagai jaganathan
365
IGX Dialog CSS issue
posted

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.

.igx-dialog__window {
        max-height: 70%;
        width: 60%;
        position: fixed;
        top: 15%;
        left: 20%;
        background: #fff;
        z-index: 1;
        overflow: auto;
    }
in certain child components this is not working and we have to use ::ng-deep to make it work. if we use :: ng-deep it is applied globally and we dont want that. 
tried using :host ::ng-deep that also seems to not work. any recommendations on how to set the custom css styles to individual child compone nts igx dialog  or can we apply  any custom class to the igx dialog directive and customize css for that dialog rather than applying for  .igx-dialog__window  as generic
Parents
No Data
Reply
  • 500
    Offline posted

    Hello,

    I have been looking into your question and your requirements to style igx-dialog components in each of your individual components could be achieved with Ignite UI Angular Theming.

    To get started with styling the dialog windows, you need to import the index file in each .scss component file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

    Next you will create a new theme for each dialog in each component that extends the dialog-theme and accepts parameters that style the dialogs:

    $my-dialog-theme: dialog-theme(
               $background: #011627,
               $title-color: #ecaa53,
               $message-color: #fefefe,
               $border-radius: .3,
);

    Since the dialog windows use the IgxOverlayService, in order for our each custom theme to reach down the each dialog window that you want to style, you will provide a specific outlet where the dialog window will be placed in the DOM when it is visible. In short, you'll set the igxOverlayOutlet directive on each element that contains the dialog itself:

    <div igxOverlayOutlet>
    <igx-dialog #dialog1>
    </igx-dialog>
</div>

    The last step is to include the component theme in each of yours components:

    :host {
     ::ng-deep {
        @include dialog($my-dialog-theme);
    }
}

    The described scenario could be observed here:

    In addition, I have prepared small sample with two components that each has single igx-dialog component. The two child components is included in the parent app.component and and each component implements the above approach to style its igx-dialog. This sample could be found here. Please test it on your side and let me know how it behaves.

    If you require any further assistance on the matter, please let me know.

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics

Children