💬 WeWeb team needs your feedback: Select/Multiselect element

Announcements Product Research
21

@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

22

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

Screenshot 2024-04-19 at 10.29.06 AM
Screenshot 2024-04-19 at 10.29.06 AM882×1478 98.9 KB

23

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.

24

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

25

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.

26

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

Bildschirmfoto 2024-06-28 um 20.27.28
Bildschirmfoto 2024-06-28 um 20.27.281372×324 41 KB

27

@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.

image

<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>
28
  • Really could use more styling properties for the Options (font family, border, etc)
  • Need to allow for custom icons on the trigger; currently just old font icons
  • Generally, just more public instruction on how to use the component as those currently available are not up to date with the current version