Style in EJ2 JavaScript Dashboard layout control
8 May 20231 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.
.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.
.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.
.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.
.e-dashboardlayout.e-control.e-responsive {
background: #b3d3ed;
}
You can refer to our JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.