💬 WeWeb team needs your feedback: Select/Multiselect element

[asanzjones]

@luka I recommend you take a look at the Quasar Select component, which is made for Vue.js v3. It’s worth it, and all other components as well.

Arturo

[archenia_jsanchez]

Something like Google Flights, no, where it says “[filter] +4” or something, right? Looks like the multi select has an array of the selected options and a length. Using this you can create a no code formula for the selected option text to [0].value + length-1

[EvilHIdden]

When using the select and/or multi-select an an input in a repeating item, it would make things so much easier if that variable/value is exposed. Right now, we have to do a large workaround of creating additional variables and workflows to keep track of it, which doesn’t always work out.

[raelyn]

Popping back in here because I realized another thing it lacks - infinite scroll with Xano back-end pagination for the dropdown options

Infinite scroll with Xano backend pagination

Hi @Joyce, Same question here as @raelyn. I want to populate a multi select element with dynamic options from Xano but, there are more than 500 options, but I don’t want to load all options into the browser. So is there a way to do it with backend search and/or paging. While writing this. I am thinking to use the search with dropdown element and alter it a bit to instead of selecting a single object I will select an array of objects. Is that a valuable approach for this?

[Antiokh]

Long time ago, just seen the topic. I advocate to have an “active” state if user put the cursor inside an input box to be able to style it similar to other inputs.

[andreas]

I would love some more styling options for the dropdown (container of the options) like margin, padding and background color

[archenia_jsanchez]

@andrea, in the meantime, below is some CSS that you can start to play with to control some of that styling. Let me know if you have any questions about it. See screenshot for output.

<style>
    .multiselect-dropdown {
        border-radius: var(--ms-dropdown-radius, 8px) var(--ms-dropdown-radius, 8px) !important;
        bottom: -4px !important;
        max-width: fit-content !important;
        width: fit-content !important;
        overflow-y: scroll !important;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1)
    }

    /* For browsers that support `scrollbar-*` properties */
    @supports (scrollbar-color: auto) {
        .multiselect-dropdown {
            scrollbar-color: #ccc transparent;
        }
    }

    /* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
    @supports selector(::-webkit-scrollbar) {
        .multiselect-dropdown::-webkit-scrollbar {
            background: #ccc;
        }

        .multiselect-dropdown::-webkit-scrollbar-thumb {
            background: transparent;
        }
    }
</style>