Style in TypeScript Dashboard Layout control

18 Nov 20181 minute to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the Dashboard Layout panel header

Apply the CSS below to customize the Dashboard Layout panel header.

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
    color: #754131;
    background-color: #c9e2f7;
    text-align: center;
}

Customizing the Dashboard Layout panel content

Apply the CSS below to customize the Dashboard Layout panel content.

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content {
    background-color: #c9e2f7;
    padding: 50px;
}

Customizing the Dashboard Layout panel resize icon

Apply the CSS below to customize the Dashboard Layout resize icon.

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{
    color: #0378d5;
    font-size: 30px;
    height: 20px;
    width: 20px;
}

Customizing the Dashboard Layout panel background

Apply the CSS below to customize the Dashboard Layout panel background.

.e-dashboardlayout.e-control.e-responsive {
    background: #b3d3ed;
}

Refer to the TypeScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our TypeScript Dashboard Layout example to knows how to present and manipulate data.