- This topic has 12 replies, 3 voices, and was last updated 1 year, 6 months ago by
.
-
I need to color some list item in different colors.
The preferred resut would be to color the background of the list item.
I tried with color attribute (red or #e0e383 notations) but nothing changed nor in the background nor in the forground colors (I tested also in tour demo setting color=”red” in a smart-list-item with no result).
I tried using style=”background-color: red;” and I obtain a strange result : instead of seeing the background in the red color I see a thin red color line above the item.
How can I solve ?
Tks
The testcase
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>DropDownList Overview</title><meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ /><link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
<link rel=”stylesheet” type=”text/css” href=”../../styles/demos.css” /><link rel=”stylesheet” type=”text/css” href=”styles.css” />
<script src=”index.js”></script></head>
<body class=”viewport”><smart-drop-down-list>
<smart-list-item style=”background-color: red;”>Item 1</smart-list-item>
<smart-list-item>Item 2</smart-list-item>
<smart-list-item>Item 3</smart-list-item>
</smart-drop-down-list>
<!– scripts –>
<script src=”../../../source/modules/smart.dropdownlist.js”></script>
<script src=”index.js”></script></body>
</html>Tks for your answer, however it seems that loading data from a dataSource is faster than create many <smart-list-items> and than I’m in an impasse :
- if I use a dataSource I loose the coloration features I need
- if I use <smart-list-items> I get poor preformances when I’ve large dropdown list
Could You suggest a way to solve that problem ?
Tks
P.S. : Is there some url location where I can see what’s allowed in dataSource and what’s not ?
Tks, more or less solved.
I still have a problem, when the dropdown list opens I see the following effects :
- all elements have the correct height (setted by a class) but the last one which is larger (eg 50px vs 20px)
- down of the last element I’ve a lot of white space (more or less 50px)
Here my css definitions :
smart-drop-down-list {
min-height: 35px;
height: auto;
}.smart-list-item-container img {
width: 100%;
height: 100%;
}smart-list-item .smart-content,
smart-list-item .smart-overlay,
smart-list-item,
smart-drop-down-list {
height: 100px;
}.smart-list-item-container .image-description {
display: block;
position: absolute;
z-index: 99999;
top: 0;
left: 70%;
}I can provide You a printScreen of the noisy effects.
Tks
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
- You must be logged in to reply to this topic.