DropDown Multiselect

Hello ! I am a Weweb Beginner but I came to achieve many things easily with this amazing tool ! thanks !

I have an issue :
When using the drop down multiselect, Moving from “tag” to “counter” option, the styling doesnot apply anymore to the text of the dropdown and to the “x-Items selected”

Any clues ? Works perfectly with tags however

Thanks !

Phil

Hi @Philibert :wave:

Indeed it doesn’t. I’m not sure that’s intentional. Let me ask the team and get back to you on this one.

If you need a quick workaround, you could add a text element, style it as you wish, and bind it to the length of the multi-select variable:

Not ideal, but could work depending on your use case.

Thanks for the answer !

I’ll wait for the answer from the team for this one as it will still be displaying “2 options selected” in the multiselect
(I could also choose tag and display = none for the text but it leaves an empty box and I don’t like it so much for the UX)

Waiting for your answer :wink:

Merci

Philibert

Hi @Philibert :wave:

Ok so the text and style are hardcoded by the library we used to build the element. It’s something we might make customizable in the future like we did for the tag mode but I can’t provide an ETA.

I’ll create the product ticket so the team can explore that option.

Great Thanks for your answer

Hello! Was wondering if there was a custom CSS workaround option for this or if there was any update? Seems easy enough to do - thank you!

Hey there ! I ended up building my own Dropdowns ! (f you have many, now with the components it should be much more optimized)
The dopdowns i made are composed of a button and a div under it that has conditional rendering. Inside of them, i used checkboxes.
I think it’s the best way, it enables full customisation and flexiblity

If you wish i might make a quick video on how to build it ?

1 Like

Ah! would love a video or even a high level step by step but understood if it that will take you time and you don’t want to! I can explore that route but having a video would be nice to have :wink:

1 Like

Alright I will do my best. Maybe it is not the best solution but works for me :wink:
The Composition is :
Container > button & container() (absolute positionning & conditional rendering) > ContainerOptions (linked to a collection if needed) > check box(es)
When Clicked, a boolean variable shows the container (
)
When a checkbox is clicked, it fills an array variable so you can use it for filters (and removes it when unclicked)

For the Checkboxes logic, you may reffer to th documentation and forums :wink:

Hope it helped !

If anyone has another solution or tip please let me know !

Thank you! This is superhelpful! I’ll be trying this soon and will let you know how it looks!

1 Like