Style and appearance in Angular Dialog

26 Sep 20262 minutes to read

The following CSS rules can be used to customize the Angular Dialog component’s appearance based on your requirements.

Customizing the Angular Dialog header

Use the following CSS to customize the Angular Dialog header.

.e-dialog .e-dlg-header {
    color: green;
    font-size: 20px;
    font-weight: normal;
}

Customizing the Angular Dialog content

Use the following CSS to customize the Angular Dialog content properties.

.e-dialog .e-dlg-content {
    color: red;
    font-size: 10px;
    font-weight: normal;
    line-height: normal;
}

Customizing modal dialog overlay

Use the following CSS to customize the modal dialog overlay.

.e-dlg-overlay {
    background-color: slategray;
    opacity: 0.6;
}

Customizing the Angular Dialog resize icon

Use the following CSS to customize the dialog resize icon (the grip that appears at the bottom corner when enableResize is true):

/* To change the icon content */
.e-dialog .e-south-east::before, .e-dialog .e-south-west::before {
    content: '\f047';
}

/* To set the icon pack */
.e-dialog .e-resize-handle {
    font: normal normal normal 14px/1 FontAwesome;
}

The above CSS demonstration uses the font awesome icon.

Customizing the Angular Dialog close button

Use the following CSS to customize the dialog close button.

/* To specify font size and color */
.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
    font-size: 12px;
    color: red;
}

Use the following CSS to customize the Angular Dialog footer button.

/* To specify font color, background color and border color */
.e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary {
    background-color: transparent;
    border-color: transparent;
    color: blue;
}