[RELEASED] Selectize dropdown

[coty]

One more question for you, I have everything working for the most part however this element does not appear to follow normal ordering rules in the element tree. I have a regular input element placed to the right of the selectize dropdown but at the exact same height (y value) but this dropdown always gets placed last.

I even tried to use the plugin “fix tab order” as their is a commentor that mentioned he used it to fix the tab order of his selectize dropdown but after adding in an ID “fix tab order” will not recognize this dropdown. Can you assist?

[Jici]

I’m not very familiar with this plugin. I think you may put the dropdown into is own group and do the same with the next input. Be sure the group that contain dropdown is on top of the second group.

[coty]

This grouping method to simply achieve proper ordering is very “messy” way to achieve this. I do not want to add every element into overlapping groups.

Could you please take a look at the post on this thread here - Solve tab order with Air Keyboard Shortcuts - #3 by julienallard1

They provide a second option to achieve this however the script provided does not seem to recognize your input correctly. If this element would follow standard bubble ordering rules that would also be okay.

Looking forward to your response.

[coty]

I seemed to have solved it by just using the default settings in the “fix tab order” plugin and not using the custom order. It seems to go top to bottom left to right regardless of the elements position and correctly recognizes all inputs.

[bluesyBlues]

Hey folks - sorry if this has been covered but the thread has over 200 messages and it’s hard to find an answer.

I have two issues I’m running into:

1. If I try to use a custom state as a criteria for the DYNAMIC LIST SOURCE search, it doesn’t always work. It seems this is because the element is being built before bubble is able to populate the custom state. Is there a workround or other toggle to force the dropdown to refresh after bubble has fully loaded all the other elements on the page?

2. The search in the DYNAMIC LIST SOURCE only seems to allow for simple types (text, numbers etc.) It does not seem to allow for types that are sourced from other tables. So while I have 10 fields in my dynamic list source table, only two are able to be used in the search. Am I missing something simple here?

Thanks in advance for any help.

[Jici]

Hi @bluesyBlues
If you are using a custom state that is populated using a workflow, it’s better to hide the selectize dropdown until data are loaded. Set the selectize to not be visible on page load and add a conditionnal when state is not empty to show it. The other option is to use the “auto-refresh” settings. Enable this and the dropdown will update automatically after the state is set.

For the #2, I’m not sure to understand what you mean for types sources from other tables. Can you give some example or a screenshot of your settings?

[argent.uk]

Hi @Jici

What is the correct method for checking if the selectize is empty? I want to give it a red border if it is empty.

I’ve added a conditional:

But I get a Recursion error.:

[Jici]

This message is more a warning than an error. In some case, you may need do set a conditionnal on the same element and Bubble will show this message. Is it working?( Actually, I only see you are modifying the Border width).

[argent.uk]

Yeah it’s working. I’ve shifted the condition to another element which now works without the circular reference issue

[hwgz01]

Hello @Jici good day ~

I just bought the plugin, however I noticed these 2 things below:

1) the dropdown list of options goes underneath the element below:

2) is there anyway of cutting the texts of selected value short instead of overflowing to the next line?

For my use case, I only allow 1 value to be selected by the user at anyone time. The one on the left is how it is currently behaving, and the right one is what I hope to get.

Thank you in advance ~

[Jici]

Hi!
for the first thing, just use Bubble Bring to top function. If you have put the Dropdown into a group, think about using the Bring to top function on the group.

For the second question, you can use the Custom HTML setting.

function truncate(str, n){
  return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};
'<div style="padding: 5px;">'+truncate(item.display,25)+'</div>'

Just modify the 25 by the number you want to use that will best fit the width of your dropdown. you can use it in Both Custom HTML (this is for the list of options) and Custom HTLM Items (that is for selected items).
you can also add a tooltip function that will show the whole option on hover for example.

[gianluca2]

Hi, I have the same problem of @zavitac : I would like to use a dropdown inside a Group. This group is followed by another group which is covering the dropdown list, even if the “overflow” option is set up on the “RG Display” field.

[Jici]

Are you using it in a group or in a RG? (Or a group inside the RG)?. Don’t forget to use the Bring to front from Bubble on the group.
Can you share your settings in the RG section if you are using it in a RG?
Thanks

[gianluca2]

It’s a “normal” group; I use it in order to manage the position of the items using the responsive new engine. I solved bringing to front in sequence every inherited group… Thanks

[laurence]

Hello, @Jici.
I’m getting back to my app after another long hiatus. I’m looking for documentation about Selectize dropdown and can’t find what I’m looking for.

I recall playing with the demo and sandboxjc, but I thought there was something more comprehensive, i.e. written as documentation that would put move of how to use Selectize in perspective.

What is the best way for me to step back and get a grasp on how to work with Selectize dropdown?

[Jici]

I started to build the documentation for mu plugin a few times ago but didn’t get time in last 3 month to continue on that. I will be able to resume on that in 2 weeks. But for now there’s the demo page, some info at the bottom and a lot of information on the plugin itself.

[services3]

Hello

Thank you for the great plugin, I’m using it in many of my projects!

I’m trying to bind Initial values but see the only first one. Can you help me, please?

I have Skills table in DB. Each CV has a field “Main skills” that is list of Skills. I’m using this list as Initial value.

[Jici]

Hi @services3 ! you just need to complete with join with , (comma if you didn’t change the delimiter).

[gianluca2]

Hi @Jici , I am still struggling a lot when the Selectize component is inserted into a RG of a page with the new responsive engine, and I am not able to find out the solution to obtain the overflow of the dropdown list. During some experiments, I found a way, but I am not able to recreate the good one.

In your template example page, there is an example and it works fine. Can you do the same example (component in a RG) also for a page build with the new response engine?

[Jici]

@gianluca2 Hi! I didn’t get time to test with the new responsive engine. My demo is on the old engine. I will try to do a test with the new responsive engine this week.