Hi ,
I would like to change the color of the specific items in the list dropdown like as shown in the attached image file.I'm able to get it by css for the first three child elements in the list using CSS. but when i search particular element the other first three suggested elements also changing the color. I want the color only for those items. Please suggest me how can i achieve this.
Thanks in advance,
Ekadeep K
Kuruma Ekadeep wrote:
Milton Sagala wrote:
Please see attached sample oml. I added a event during searching to add the color again.
Hi Milton Sagala,
I tried with the logic that present in the oml that you provided. Appreciate you on providing that code. But when i create similar drop down having special list values it is not working as epected, it loosing it property when during the time of search. Please refer the sample oml. and link
http://tmai-dev-dev.outsystemscloud.com/sample/Entry1.aspx?_ts=637091584759183926
Looking forward to hear from you.
Ekadeep
I tried to recreate the data and made some minor changes to your code. Please see attached oml.
https://miltonjohnsagala.outsystemscloud.com/sample/Entry1.aspx?_ts=637092243032393192
Thanks.
Hi Kuruma,
What kind of app are you creating, Web, Reactive Web or Mobile? And what Dropdown Widget are you using? The one from OutSystems UI?
Kilian Hekhuis wrote:
I'm creating web app and i used combo box along with dropdownselect widgets .
Suggest me how can i achieve that type .
A workaround for this is to use javascript to apply style/class to the label of the list wherein the input value is the text of the first 3 child element.
I tried with that too, it is working but whever the user use search input it loosing its property
$(document).ready(function(){ $("#wt3_OutSystemsUIWeb_wt2_block_wtContent_wtMainContent_wtselectcontainer").click(function(){ $("#choices-wt3_OutSystemsUIWeb_wt2_block_wtContent_wtMainContent_wtselect-item-choice-1").css("color", "red"); $("#choices-wt3_OutSystemsUIWeb_wt2_block_wtContent_wtMainContent_wtselect-item-choice-2").css("color", "yellow"); $("#choices-wt3_OutSystemsUIWeb_wt2_block_wtContent_wtMainContent_wtselect-item-choice-3").css("color", "blue"); }); });
You can try something like this:
SyntaxEditor Code Snippet
$(document).ready(function(){ $("input[value='Manage Plan']").parent().css({"color": "red"}); });