[RELEASED] Selectize dropdown

@2706mason For autobinding, I cannot answer for @Thimo. For the spinner icon, you can hide it with custom CSS in header of your page. Try this:

<style>
.loader {
display: none !important;
}
.selectize-input > b {
display: none !important;
}
</style>
1 Like

Hello! Great plugin, i’ve been using it for a while and its great!
I have come up with an issue tthat is bothering me and cant seem to find a workaround so far. I am not a coder so maybe havent tried hard enough…

When a lot of options are selected the input box size keeps increasing but the page and the elements around it dont update causing it to start overlapping to elements below. I tried using a range for element height but as soon as I ad an item, the item visually dissapears and the input box returns to regular size

Even on the demo page you can see how adding a lot of items will make the field overlap the elements below.
image

I am using this for an email form and I have the TO, CC and BCC right on top of each other like most email forms

But when I create a lot of items into the TO field it starts overlaping the CC field below
image

I even tried doing Conditionals on the selectize element to change Height when Item Count is more than 2 but when the condition evaluates to true all the items visually dissapear and the input colapses to the original empty height.

The only “workaround” I have found is to set the height to a larger fixed amount.


Not only does it look horrible
image
It doesnt even fix the issue…
image
do you know what I could do to get this issue fixed? Couldnt find anything about it in the topic.

Thanks!

On which version are you? In the new responsive engine?

Yes I am on the responsive engine

And which plugin version? Can you share layout settings?

Plugin version: 1.22.3
Layour setting


Padding, since I dont know what im doing
image

thanks!

You should remove fixed-height and try min-height, no max, and set fit-heigth to content. Be sure parent also have similar settings if needed. Also, use bring to front to be sure it’s above other elements (could be done on the parent group too if needed)

I originally did this setup on the element. The parent group is also fitting to height.
image|321x130

For some reason, on this setup, when I add the FIRST item into the dropdown, it visually disapears from the field and the input field collapses to empty size.
If I set NO max height or a specific max height the result is the same, it wont add the elements into the dropdown

If I want items to display I have to set max height or it just wont work.

Have you been able to look into this for a fix?

I’m not the owner anymore of the plugins so maybe @Thimo can check that. However, for me, (but I’m on version 1.21.0… that could make a difference because 1.22 is a refactor version), I have no issue to get the height increase when adding more elements and other element under descend. You can send me a DM with a link to your editor app in public view or edit mode and I can take a moment to check that)

@Thimo what do you mean: create on “Blur”??

Blur = unfocus
So if user exit the dropdown while he was typing a new item, this will trigger item created event and add a new item in the list

Why is it red?

image

And you say trigger, are those events being triggered automatically by the plugin, or i have to set up the workflow, im trying to update DB whenever user creates a new option

Also, (For a single dropdown) if user created new option, and then decides to create a different new option, and use that instead, is it not possible?

Which type is “town”?
There’s nothing created in DB. The event is triggered. but you need to add this event in your workflow (Selectize value’s added). At this moment, you can create the new item in your DB and use update item to set the unique id to this item. I think that @thimo have this example in demo page. selectize-demo | Bubble Editor (but not other step to create in DB and update option, this is needed to set the unique ID of the new option created in DB to the selectize plugin)

For your last question, yes this is possible. User create a new option again and this will trigger the WF again and set this item selected

Sorry i wasnt clear, im trying to

  1. let the user add a new option to a (Single select) dropdown, (Example: Towns) along with a workflow to add to “Towns” database, how do i set up the workflow?

  2. once the form (example: an Order) is filled by the user, i want the Form’s “Order” to save the newly-user-created “town” option, to a “town” field in the “order” thing, how do i set up such workflow?

The events, the action, and the expression in the builder

Thanks for helping me

  1. Trigger= selectize dropdown item added. Actions: Create a new thing in DB > update option a selectize dropdown (set the unique id of step one in new ID field, set the value item added (town) in current ID (this need to match exactly what user have entered because the dropdown will set a temporary ID that is the value entered by the user) and set new value (the value is the display text) with the same thing if you didn’t modify it when saved in DB (let’s say you want to capitalize the new value, you could did it in create a new thing, at this moment, you will also use result of step 1 town)

  2. If your town field is of type “town” db, so you will use All selected ID:first item (because this is a single choice and I guess your field is not a list too)

1 Like

@Thimo how do I use the initial value set in the dropdown and pass that to a thing. When I use “last value added” it just ignores the initial value and creates a null value.

@white-eye last value added is just from user interaction, not from initial value.
Use All values ID or All values ID:first item (if used as single dropdown)