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