JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › DropDownList › Coloring list items › Reply To: Coloring list items
I reproduced at least aprtially the problem on Your example (but I was not able to save it).
I simply added a new class.
This is the modified css
html, body { padding: 10px; }
.bg-red .smart-list-item-container {
background-color: red;
}
smart-drop-down-list {
min-height: 35px;
height: auto;
width: 300px;
}
.elemento_list_item {
height: 20px;
}
.elemento_list_item .smart-content {
height: 20px;
}
And this is the modified js
window.onload = () => {
const dropDownList = document.querySelector(‘smart-drop-down-list’);
dropDownList.dataSource = [
{ label: “WAM ROMANIA”, value: “AF”, class: ‘bg-red’ },
{ label: “WAM PRODUCT”, value: “AA” }
]
dropDownList.dataSource.forEach(element => {
const item = dropDownList.getItem(element.value)
console.log(item);
item.classList.add(“elemento_list_item”);
item.classList.add(element.class);
});
}
Tks
- This reply was modified 2 years ago by tbettinazzi@axioma.it.