As stated by the title, I’m trying to figure out how I can customize the tag colors on the multi-select dropdown element. The two main problems I am running into:
I can’t figure out where I can change those blue tags to a different color.
I can, however, customize the tag text color but when I do change it (such as to the white you see on the screenshot) it also changes the text colors still in the dropdown. For example, under that “4K” option is another option that says “5K”. However, you can’t see that because the font is white.
Thanks for posting that video @Joyce ! It has helped me figure out customising colours for each option. However, I wasn’t sure how to make the cross icon to remove each option work. How do I do it?
Hey @Joyce, I’m adding to this comment, when you switch to Free layout, the remove (X) icon is gone and cannot be accessed, I’ve already filed a bug report.
create a workflow on click of the option container (not the options, the individual option)
use the Return a value action to find the index of the current option (the formula is available in the list of array no-code formulas and will look something like this: findIndex(input_variable, item.data.id)
test that first action before creating the second action
use the Change variable value action with the Remove at index option to remove the index returned in the preview action
Here’s a short video walking you through the process.
Hey @Joyce (or @mervynsimzr) I was inspired by this thread to mess around with FREE LAYOUT in the multi-select - but now hitting a roadblock.
So far, I set the mult-select to free layout - I dropped the “tag” (the one with icon + text + “x”) into the option and the option - selected flexboxes - and then I bound the text and bg color to a collection (from Xano). So far so good, opening the multi-select shows my bound options and colors.
Also - I did add the workflow to remove a selected option from your video to the “x” in the tag - and that does work.
But my roadblock(s) now are that when I move the mouse over the list of options - all of them change to hover state bg color -
Further - when I click to select one of my options - it does not correctly send the value to the mutli-select variable array of selected items - how do I do that? Right now, if I click on an option it adds an “undefined” to the mutli-select variable array and “breaks” the multi-select.
I am assuming I need to create a workflow to put the right value into the the mutli-select variable array when I select an option - but clueless at the moment how to get there
Also, I see when I add an option that does not exists - (“Allow to create option” enabled) - that does get added correctly to the variable array - but I would need to way to trigger a workflow to add that new option to Xano table - curious how / where I would do that as well.
Okay - I managed to solve the behavior above. While I bound the options to a collection - I did not assign the Label field and Value filed. So, now that I have done that the issues described above are resolved.
I still have some other behavior that is not yet working correctly, I’ll bang a way a bit more and post a video.
Okay @Joyce - here’s loom video with where I am at - there are basicallyTWO problematic behaviors -
#1: On my custom mutli-select- when I search there is a “phantom value” - an extra, undefined value is displayed in the drop down options.
#2: When I delete a selected option - via a workflow when clicking on an “x” on a value on a selected item - it DOES correctly delete from selected options - BUT the drop down opens and displays the options with a repeated value of what was deleted. I feel like if I can prevent the drop down from opening on tha click on “x” workflow all will be well …
Hey @Joyce - @Max was kind enough to jump on a zoom with me after I followed his video and made further progress. I showed him a what we think is a BUG you can easily recreate by enabling Free Layout and allow to create option - here is a video of the BUG on search - when “Allow to create option” is enabled in Layout type= Free Layout mode:
In addition - I have ANOTHER question (and/or feature request if it’s not currently possible via a work-around): Ability to trigger a workflow when a new option is added - this would allow user to ADD the new custom option to a bound collection or variable for list of options. Not sure if there is a work-around for this??
@Joyce when I remove an selected option by tis index, that option is duplicated again and again in the Option list to select options from. How can I fix this?
You can go full custom with the “Free layout”:
I am facing this issue now where when I delete an option, phantom values appear too.