Multi Dropdown Colors

Hello everyone,

I would love to change colors marked with arrows on my multi dorpdown list.

First one is already choosed tag, second one is hoovered one.

How can i do it?

I have heard that it can be done with CSS but i’m not sure how…

You need to inspect the element CSS and modify it using HTML element or page header
Example:

<style>
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ecafaf;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #dac900;
    color: white;
}
</style>

My selectize plugin allow you a lot of customization that may be easier to do :wink:

4 Likes

@Jici nice! But how can I edit this element CSS code? Where can i do it?

Also one more question - can I easily limit User input characters in your Selectize Plugin? Let’s say that i want each tag to be maximum 20 chars long.

By the way, pretty cool plugin but i have two more questions @Jici

  1. Why those “inside borders” are blue? Why “clicked” tag becomes blue? Where can i change that?
    selectionplug

  2. When i choose maximum tags amount, the field becomes white. Where can i change that?
    selectionplug2

  3. How can i limit number of characters when user types his own tag?

1 Like

Next update will have option to change active item color :wink:
I will check for the max options issue today

Thanks! So i will have to change my current plugin to yours… I hope to see that update soon!

Will it cover also this “inside border” between tag name and “x”? And what about this white background when maximum amount of options is selected? @jici

It will really save me a lot of time!

Yes I will add new settings for the bar and the selected element.
I will check for the max options but it will also be fixed in next release.
I plan to release it on next monday :slight_smile:

Whoa! Nice!

Also what i miss from “classic” Multi Dorpdown - can i do something like this?:

  1. User clicks on some tag from the list
  2. List automatically close (dropdown list with options)

Not sure to understand. You mean user select 1 item and the dropdown close automatically instead of letting user choose all item he want to pick? (Talking about multiselect)

Yes, that’s exactly what I mean :slight_smile:

You can actually use Workflow for that: Trigger on item added and use action Close dropdown. It should work.
Natural behavior for multiselect normally is to keep it open so user don’t need to reopen between each selection. Will check if library have an option for that

You mean like this? Don’t work for me.

Also, did you know how to “hide” loading? Like don’t show element till it’s loaded or simply show it without this “Loading…” text?

And sorry for spam but if we already talking here…

Are you planning to add to “element actions” some action like “Add item to Selectize Dropdown”?

So for example:

  1. User clicked on button with “Politics” text.
  2. “Politics” is added to tags he already choosed.

If no, i will work some workaround and post it here.

Yes I can consider adding an avtion to add item. Actually, you can use the Reset items. I think it might work too.
For the loading text, it’s not possible to remove this actually. In the V2, this may be different because it will use the natural library rendering. But until element is hidden, Bubble will not trigger the plugin, so data is not loaded before. You can always edit the CSS manually in page header.

@Jici V2?

To be honest, well managed tags system is really important in my project so i would like to use best plugin possible. Do you know release date?

When it comes to Reset items - it will reset it and i just want to add another tag to existing list so “add” funcionality would be better.

About CSS - to be honest i’m into bubble since like one month, can you guide me how can i do that? I mean the place in which i can edit CSS.

Yes. Send me a PM and I will help you set it like you want :wink:
For the release date plan is next monday but not for V2. But for the fix and some more settings like add item :stuck_out_tongue_winking_eye:

1 Like

Great!

I will be looking forward for plugin update next monday and for V2!

For now I will wait for monday update, check what can i do and will message you with some quetions if there are still any :wink:

1 Like

Released.
I have a small issue to fix so there will be another update this week, but your request are in the current update (add and remove item, color for item selected, color left border for X). Issue fix for max item BG

I need to do some more test for closing after select. There’s an option for that, but depending if you are using it for single or multichoice, the behavior is different. It should be in next update too.

1 Like