DropDown List different colors

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
mskuodas
Posts: 22
Joined: 2018-12-16 19:53
Location: Lithuania
Contact:

DropDown List different colors

Post by mskuodas » 2018-12-25 22:02

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: DropDown List different colors

Post by pbottcher » 2018-12-31 11:18

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);	 
}
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: DropDown List different colors

Post by jsetzer » 2018-12-31 14:53

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 7273 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 7273 times

Kind Regards,
Jan

PS: Appy new year, everyone!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

mskuodas
Posts: 22
Joined: 2018-12-16 19:53
Location: Lithuania
Contact:

Re: DropDown List different colors

Post by mskuodas » 2019-01-01 18:54

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
Veteran Member
Posts: 86
Joined: 2018-05-23 09:32

Re: DropDown List different colors

Post by sjohn » 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.

mskuodas
Posts: 22
Joined: 2018-12-16 19:53
Location: Lithuania
Contact:

Re: DropDown List different colors

Post by mskuodas » 2019-01-08 17:26

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

xbox2007
Veteran Member
Posts: 129
Joined: 2016-12-16 16:49

Re: DropDown List different colors

Post by xbox2007 » 2019-01-13 14:59

very nice ,

thanks a lot

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: DropDown List different colors

Post by onoehring » 2019-07-05 09:58

Hi,

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

Olaf

sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Re: DropDown List different colors

Post by sacgtdev » 2021-12-29 08:45

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: DropDown List different colors

Post by pbottcher » 2021-12-29 09:42

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.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: DropDown List different colors

Post by jsetzer » 2021-12-29 09:46

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.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Re: DropDown List different colors

Post by sacgtdev » 2021-12-29 13:04

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: DropDown List different colors

Post by pbottcher » 2021-12-29 15:37

But the image shows different background colors. So I'm unclear what you try to achieve.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Re: DropDown List different colors

Post by sacgtdev » 2021-12-29 23:41

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

Image

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: DropDown List different colors

Post by pbottcher » 2021-12-30 10:35

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);
})
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Re: DropDown List different colors

Post by sacgtdev » 2021-12-30 15:49

The code works. Thank you pböttcher

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: DropDown List different colors

Post by espo » 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.

espo
Veteran Member
Posts: 98
Joined: 2013-03-01 12:55

Re: DropDown List different colors

Post by espo » 2022-03-07 13:38

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!

Post Reply