@tbettinazziaxioma-it
@tbettinazziaxioma-it
Forum Replies Created
-
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
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
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 ?
Anyway I tested
<smart-drop-down-list filterable=”true” filter-mode=”containsIgnoreCase” id=”e47522256″ min-length=”1″ selectionMode=”zeroOrOne” class=”elemento_combobox_valore” name=”e47522256″ selected-indexes=”[4]” required=”” onchange=”mostraAlertMsgOption(this); eseguiRefresh(this);” onfocus=”on_focus(this)”
data-source=[{label: ‘WAM ROMANIA’, value: ‘AF’}, {label: ‘WAM PRODUCT’, value: ‘AA’}]>
</smart-drop-down-list>And I allways get an error :
expected property name or ‘}’ at line 1 column 3 of the JSON data
What’s wrong ?
Tks
Tks for you help but this approach doesn’t work in a more complex environment.
It’s enough to add a div in whithin and it fails (see below) and in my real environment I’ve many divs or other intermediate objects.
Why we don’t see it in page elements if not checked ?
Tks
<section id=”check-box”>
<div>
<p>Checkboxes allow the user to select multiple options from a set.</p><br />
<p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br />
<p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br />
</div>
<br />
<form>
<div>
<div class=”check-box-container-light”>
<input name=”C0″ type=”hidden”/>
<div>
<smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
<smart-check-box name=”C2″></smart-check-box>
</div>
</div>
</div>
</form>
</section>Tks for your help but this doesn’t solve the problem.
If You add aonther field to the fom (as in the example) it goes into a js error (e.g. adding an input hidden field).
<section id=”check-box”>
<div>
<p>Checkboxes allow the user to select multiple options from a set.</p><br />
<p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br />
<p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br />
</div>
<br />
<form>
<div>
<div class=”check-box-container-light”>
<input name=”C0″ type=”hidden”/>
<smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
<smart-check-box name=”C2″></smart-check-box>
</div>
</div>
</form>
</section>
