DropDown List different colors

[mskuodas]

Hello, all,
I have DropDown list with for example options:
Yes;
No;
How to make them different colors? Not default black.
Yes - green
No - red.
Thanks

[pböttcher]

Hi,

you can try this in the hooks/<tablename>-dv.js:

Assuming your selection is "empty, yes, no" otherwise you need to adjust the below code accordingly.
Replace YOURSELECTNAME by your selection.

Code: Select all

$j(function () {

	 var onSelectOpen=function(){ 
		 $j(".select2-drop-active .select2-result-selectable:eq(0)").css("color","")
		 $j(".select2-drop-active .select2-result-selectable:eq(1)").css("color","green")
		 $j(".select2-drop-active .select2-result-selectable:eq(2)").css("color","red")		 
	}
	 
	 var onSelectClose=function(){ 
		var myval=$j("#YOURSELECTNAME").val();
		switch(myval) {
			case "yes":
				$j("#s2id_YOURSELECTNAME .select2-choice").css("color","green")
			break;
			case "no":
				$j("#s2id_YOURSELECTNAME .select2-choice").css("color","red")
			break;
			default:
				$j("#s2id_YOURSELECTNAME .select2-choice").css("color","")
		}
	 }
	 
	 $j("#YOURSELECTNAME").on("select2-open", onSelectOpen);
	 $j("#YOURSELECTNAME").on("select2-close", onSelectClose);	 
}

[jsetzer]

Hi,

are you using a DropDown List from Options list-tab or a Lookup field?

I usually create additional (lookup-) tables and then use lookup fields in my master table. I sometimes even do if there is only Yes and No options. Then I populate the lookup-table with the required options and format the name-column (or an additional 'label' column, as I name it) the way I want to, for example:

chrome_2018-12-31_15-41-25.png (29.75 KiB) Viewed 6435 times

You can play around with HTML as you like:

chrome_2018-12-31_15-42-51.png (11.41 KiB) Viewed 6435 times

Kind Regards,
Jan

PS: Appy new year, everyone!

[mskuodas]

Hello, pböttcher and jsetzer, Happy new Year !
And thank you for your help
I have options list dropbox with Just two options Yes and No.
They must be changed after event. For example if member is in track - He is Yes (Green), if member is not on track, he's No (Red).
I tried to write .JS as pböttcher gave to me, but didnt work. I made name-dv.js , placed code and changed YOURSELECTNAME to my field name, where is these options, but im not sure if I did well ? And how to activate that .JS ? Is it automaticly used, when placed in hooks folder, and named table-dv.js ? or I should place some another code to some other php file ?
Thanks

[sjohn]

Hello mskuodas

Provided I understand the "problem" I have a simple solution, that requires no code at all.

Create a lookup table. In this lookup table make a field defined as a rich-text field.
In the field you can then have an image and/or some colored text.

In the table where you want the lookup shown, choose this field as the caption-field.
This way you will see the color when selecting, but also after the selection. The image and/or the text will be what is shown in the table-view and/or the datail-view.

If you want another field to be colored dependend of the choice for the lookup, I think it requires code, and I cannot be of any help then.

[mskuodas]

Well, sjohn it worked perfectly Good idea I'm improved now Thanks

[xbox2007]

very nice ,

thanks a lot

[onoehring]

Hi,

I get in line for saying thanks here. What a nice "side"-feature of AG.

Olaf

[sacgtdev]

I trying out the code shared by Pbotcher, but couldn't make it work...Can anyone help?
Following is the js code:
viewtopic.php?t=2876#p9282

$j(function () {

var onSelectOpen=function(){
$j(".select2-drop-active .select2-result-selectable:eq(0)").css("color","")
$j(".select2-drop-active .select2-result-selectable:eq(1)").css("color","green")
$j(".select2-drop-active .select2-result-selectable:eq(2)").css("color","red")
}

var onSelectClose=function(){
var myval=$j("#user_sbu").val();
switch(myval) {
case "General":
$j("#s2id_user_sbu .select2-choice").css("color","green")
break;
case "Special":
$j("#s2id_user_sbu .select2-choice").css("color","red")
break;
default:
$j("#s2id_user_sbu .select2-choice").css("color","")
}
}

$j("#user_sbu").on("select2-open", onSelectOpen);
$j("#user_sbu").on("select2-close", onSelectClose);
}

Below is the html code:


<div class="select2-container option_list select2-container-active select2-dropdown-open" id="s2id_user_sbu" style="width: 100%;"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen">ABCD</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen2" disabled=""></div>


<select style="width: 100%;" name="user_sbu" id="user_sbu" class="option_list select2-offscreen" tabindex="-1">
<option value="General">General</option>
<option value="Special">Special</option>
<option value="Others">Others</option>
...


[pböttcher]

Hi,

can you please use the code display feature to add the code to the posts and format the code, that would make it easier to read the code.

Also can you what is not working. In the code below I see a <span class="select2-chosen">ABCD</span> which indicates that you have choosen ABCD which is not part of the choices.
Maybe you can also post a screenshot.

[jsetzer]

I'm pretty sure this is not related to the problem shown here, but, anyway, I'd like to give this note to you who use to embed custom HTML and/or CSS using hooks, especially in PHP:

Recently I have seen that AppGini removes certain CSS styling on the fly. This seems to be a new security feature of AppGini for avoiding XSS attacks.

So, if you dynamically inject custom HTML including CSS-style tags by code, there is a big chance that it will be removed automatically for security reasons.

[sacgtdev]

I would like to change the background of option list with different color as shown below.
Trying to use the code as shown below, but nothing seems to have changed in appearance.. Is my selector correct?




Code placed in tablename-dv.js

Code: Select all

$j(function () {

var onSelectOpen=function(){
$j(".select2-drop-active .select2-result-selectable:eq(0)").css("color","")
$j(".select2-drop-active .select2-result-selectable:eq(1)").css("color","green")
$j(".select2-drop-active .select2-result-selectable:eq(2)").css("color","red")
}

var onSelectClose=function(){
var myval=$j("#user_sbu").val();
switch(myval) {
case "General":
$j("#s2id_user_sbu .select2-choice").css("color","green")
break;
case "Special":
$j("#s2id_user_sbu .select2-choice").css("color","red")
break;
default:
$j("#s2id_user_sbu .select2-choice").css("color","")
}
}

$j("#user_sbu").on("select2-open", onSelectOpen);
$j("#user_sbu").on("select2-close", onSelectClose);
}

Code extract from HTML

Code: Select all

<div class="select2-container option_list select2-container-active select2-dropdown-open" id="s2id_user_sbu" style="width: 100%;"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen">General</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen2" disabled=""></div>


<select style="width: 100%;" name="user_sbu" id="user_sbu" class="option_list select2-offscreen" tabindex="-1">
<option value="General">General</option>
<option value="Special">Special</option>
<option value="Others">Others</option>
...

[pböttcher]

But the image shows different background colors. So I'm unclear what you try to achieve.

[sacgtdev]

How to change the text color of drop-down options?

[pböttcher]

Hi,

try

Code: Select all

$j(function () {

var onSelectOpen=function(){
$j(".select2-drop-active .select2-result-label:eq(0)").css("color","")
$j(".select2-drop-active .select2-result-label:contains('General')").css("color","green")
$j(".select2-drop-active .select2-result-label:contains('Special')").css("color","red")
}

var onSelectClose=function(){
var myval=$j("#user_sbu").val();
switch(myval) {
case "General":
$j("#s2id_user_sbu .select2-choice").css("color","green")
break;
case "Special":
$j("#s2id_user_sbu .select2-choice").css("color","red")
break;
default:
$j("#s2id_user_sbu .select2-choice").css("color","")
}
}

$j("#user_sbu").on("select2-open", onSelectOpen);
$j("#user_sbu").on("select2-close", onSelectClose);
})

[sacgtdev]

The code works. Thank you pböttcher

[espo]

Hello mskuodas

Provided I understand the "problem" I have a simple solution, that requires no code at all.

Create a lookup table. In this lookup table make a field defined as a rich-text field.
In the field you can then have an image and/or some colored text.

In the table where you want the lookup shown, choose this field as the caption-field.
This way you will see the color when selecting, but also after the selection. The image and/or the text will be what is shown in the table-view and/or the datail-view.

If you want another field to be colored dependend of the choice for the lookup, I think it requires code, and I cannot be of any help then.

Hello,
probably this solution might be ok for me.
However, I would like to ask if you can explain the procedure to me in more detail.

Thank you very much.

[espo]

Hello mskuodas

Provided I understand the "problem" I have a simple solution, that requires no code at all.

Create a lookup table. In this lookup table make a field defined as a rich-text field.
In the field you can then have an image and/or some colored text.

In the table where you want the lookup shown, choose this field as the caption-field.
This way you will see the color when selecting, but also after the selection. The image and/or the text will be what is shown in the table-view and/or the datail-view.

If you want another field to be colored dependend of the choice for the lookup, I think it requires code, and I cannot be of any help then.

Hello,
probably this solution might be ok for me.
However, I would like to ask if you can explain the procedure to me in more detail.

Thank you very much.

I solve... Excuse me!