Search results

CSS Structure in React Dashboard Layout component

14 Apr 2021 / 1 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

Use the following CSS to customize the dashboard layout panel header.

Copied to clipboard
.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

Use the following CSS to customize the dashboard layout panel content.

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

Customizing the dashboard layout panel resize icon

Use the following CSS to customize the dashboard layout resize icon.

Copied to clipboard
.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

Use the following CSS to customize the dashboard layout panel background.

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