Page 1 of 1

DropDown List different colors

Posted: 2018-12-25 22:02
by 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

Re: DropDown List different colors

Posted: 2018-12-31 11:18
by pbottcher
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);	 
}

Re: DropDown List different colors

Posted: 2018-12-31 14:53
by 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
chrome_2018-12-31_15-41-25.png (29.75 KiB) Viewed 7271 times

You can play around with HTML as you like:

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

Kind Regards,
Jan

PS: Appy new year, everyone!

Re: DropDown List different colors

Posted: 2019-01-01 18:54
by 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

Re: DropDown List different colors

Posted: 2019-01-02 12:46
by 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.

Re: DropDown List different colors

Posted: 2019-01-08 17:26
by mskuodas
Well, sjohn :) it worked perfectly :) Good idea :) I'm improved now :D Thanks

Re: DropDown List different colors

Posted: 2019-01-13 14:59
by xbox2007
very nice ,

thanks a lot

Re: DropDown List different colors

Posted: 2019-07-05 09:58
by onoehring
Hi,

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

Olaf

Re: DropDown List different colors

Posted: 2021-12-29 08:45
by 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>
...

Re: DropDown List different colors

Posted: 2021-12-29 09:42
by pbottcher
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.

Re: DropDown List different colors

Posted: 2021-12-29 09:46
by 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.

Re: DropDown List different colors

Posted: 2021-12-29 13:04
by 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?

Image


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>
...

Re: DropDown List different colors

Posted: 2021-12-29 15:37
by pbottcher
But the image shows different background colors. So I'm unclear what you try to achieve.

Re: DropDown List different colors

Posted: 2021-12-29 23:41
by sacgtdev
How to change the text color of drop-down options?

Image

Re: DropDown List different colors

Posted: 2021-12-30 10:35
by pbottcher
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);
})

Re: DropDown List different colors

Posted: 2021-12-30 15:49
by sacgtdev
The code works. Thank you pböttcher

Re: DropDown List different colors

Posted: 2022-03-07 12:33
by espo
sjohn wrote:
2019-01-02 12:46
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.

Re: DropDown List different colors

Posted: 2022-03-07 13:38
by espo
espo wrote:
2022-03-07 12:33
sjohn wrote:
2019-01-02 12:46
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!