Style in Angular ListView component

22 Jan 20252 minutes to read

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

Customizing ListView

Use the following CSS to customize the ListView.

.e-listview {
    border: 5px solid rgb(173, 255, 47);
}

Customizing the list items

Use the following CSS to customize the items of ListView.

.e-listview .e-list-item {
    text-align: center;
    color: pink;
    background-color: #2fa1ff;
}

Customizing ListView’s header

Use the following CSS to customize the header of ListView component.

.e-listview .e-list-header{
    color: #2fa1ff;
    justify-content: center;
}

Customizing group header of ListView

Use the following CSS to customize the category of the group items.

.e-listview .e-list-group-item {
    color: rgb(173, 255, 47);
    background-color: maroon;
    text-align: end;
}

Customizing the hover state of ListView component

Use the following CSS to customize the list item when hovering.

Customizing ListView hover state with the checkbox checked

.e-listview .e-list-item.e-hover.e-active.e-checklist {
    color: rgb(83, 5, 79);
    background-color: rgb(173, 255, 47);
}

Customizing ListView hover state

.e-listview .e-list-item.e-hover {
    color:red;
    background-color: rgb(173, 255, 47);
}

Customizing selected item of ListView component

Use the following CSS to customize the selected list item.

Customizing ListView’s selected item with the checkbox checked

.e-listview .e-list-item.e-checklist.e-focused.e-active {
    color: rgb(83, 5, 79);
    background-color: rgb(0, 15, 100);
}

Customizing ListView’s selected item

.e-listview .e-list-item.e-active {
    color: red;
    background-color: aqua;
}