Overlay Styling

    IgxOverlayService is used to display content above the page content. A lot of Ignite UI for Angular components use the overlay - Drop Down, Combo, Date Picker and more - so it is important to understand how the overlay displays content. To display the content above other elements, the service moves it into a special outlet container (attached at the end of the document's body, by default). This behavior can affect styles scoped to specific container.

    Styling Overlay Components

    In most cases global theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, styled by the global css-vars mixin:

    <!-- overlay-styling.component.html -->
<igx-drop-down #customDropDown height="350px">
    <igx-drop-down-item *ngFor="let item of items" [value]="item.id">
        {{ item.name }}
    </igx-drop-down-item>
</igx-drop-down>

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';


$my-drop-down-theme: drop-down-theme(
    $palette: $my-custom-palette
);

@include css-vars($my-drop-down-theme);

    The global styles are not generated under a scoped rule and are not affected by any encapsulation, and thus can match any element on the page, including igx-drop-down-item the service moved to the overlay outlet.

    Scoped Component Styles

    When scoping styles for elements that are displayed in the overlay, we need to specify to the position of the overlay outlet in the DOM. CSS rules that are scoped require a specific hierarchical structure of the elements - we need to make sure the overlay content is displayed in the correct context of the styles we want to apply.

    For example, let's take the igx-combo - its item styles use the igx-drop-down theme, because the combo defines its content inside of its own view.

    Note

    Always scope your styles in a :host selector to prevent the styles from leaking.

    // overlay-styling.component.scss
:host {
    @include css-vars($my-drop-down-theme);
}

    If the $legacy-support variable in your theme is set to true, you have to style your component, using the component's theme function.

    Note

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep

    // overlay-styling.component.scss
:host {
   ::ng-deep{ 
        @include drop-down($my-drop-down-theme);
    }
}

    The items in our combo's list are not descendants of our component host - they are currently being displayed in the default overlay outlet, at the end of the document's body. You can change this by using the outlet property in the overlaySettings. The outlet controls where the overlay container should be rendered.

    Here, we can pass a reference to the element where we'd like our container to be:

    <igx-combo [data]="items" valueKey="name" displayKey="name" [overlaySettings]="{ outlet: element, modal: true }">
</igx-combo>

    export class OverlayStylingComponent {
    ...
    constructor(public element: ElementRef) {
    }
}

    Now, the combo's list of items are properly rendered inside of our component's host, which means that our custom theme will take effect:

    Styling The Overlay

    Now that we've covered how ViewEncapsulation works along with the overlay's outlet property, we can take a look at how we can style the overlay's wrapper itself. The overlay-theme exposes a single property - $background-color, which affects the color of the backdrop when the overlay is set to modal: true.

    Global Styles

    The easiest way to style the overlay modal is to include its theme in our app's global styles:

    //  styles.scss
$my-overlay-theme: overlay-theme(
  $background-color: rgba(0, 153, 255, 0.3)
);

@include css-vars($my-overlay-theme);

    If the $legacy-support variable in your theme is set to true, you have to style your component, using the overlay's theme function.

    // styles.scss
...
@include overlay($my-overlay-theme);

    Now all modal overlays will have a purple tint to their background.

    Scoped Overlay Styles

    If we want our overlay to have a specific background only under a certain component, we can scope the theme. When scoping a modal overlay, you need to move the overlay outlet, which has some limitations. In order to minimize the risks of overflow clipping, z-index and viewport issues, we recommend using outlets for modal overlays only in higher level components:

    //  styles.scss
...
.purple {
    @include css-vars($my-overlay-theme);
}

    To make sure the theme does not affect other components in our app, use the :host selector.

    // overlay-styling.component.scss
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
...
:host {
    @include css-vars($my-overlay-theme);
}
    Note

    If the component is using an Emulated ViewEncapsulation and the $legacy-support is set to true, use the overlay's theme function and penetrate the encapsulation using ::ng-deep

    API References

    Additional Resources