CSS Choice Multiple

Hello

I’ve been tinkering with Glide since August 2020. From the start I have been waiting for a multiple selection “Choice”, I know the team has a lot of work to do and that my request will eventually be available.
But in the meantime I made an alternative solution (like “CSS Customizable Selection”)
and I took the opportunity to integrate the “Trebuchet Method” of @Lucas_Pires (thank you lucas)

Demo

10 Likes

Thanks the shoutout! This feature is slick :fire:

1 Like

Hey Manu, this looks really great. Can you share the app?
Thanks
Marco

Hello @Marc-Olivier
I haven’t shared it yet because there is a bug that I haven’t fixed yet.
As soon as I have a little time I see why

1 Like

This is just my dream for a year now!
Thanks @Manu.n

Thanks for the first one, it helped my a lot and I should be able to implement with the trebuchet method.

Hey @Manu.n,

Do you have a way of putting 3 choices components in one line.

I have a use case in which the user is to pick their birthdate using choice components but I would like to put the in one line.

This is what I got at the moment

Thanks man!

Hi, can’t you use a date picker?

1 Like

Yes! That was my first option but my client insisted on having choice components. :man_shrugging:t6:

bonjour @SantiagoPerez

something like that ???

<pre><span><style>

/* Choice 1 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:150px;
}

/* Choice 2 (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-97px;
margin-left:115px;
width:150px;
}

/* Choice 3 (4eme component) */
div[id*='screenScrollView'] > div > :nth-child(4) {
margin-top:-97px;
margin-left:235px;
width:150px;
}

</style></span></pre>

EDIT: In CSS, I remove the lines “display: fixed;” uh that doesn’t mean anything and that’s a big mistake on my part, sorry.

15 Likes

@Manu.n

Awesome!!! Exactly like that.

Thanks!!

1 Like

You have probably understood that if you change the order of the components in the page, you must adapt the nth-child parameters (…)

I did, man!!!

That is so helpful.

1 Like

No way!!! :upside_down_face::upside_down_face::upside_down_face:

Gracias!

1 Like

Salut manu tu es français j’ai l’impression? Merci pour les infos CSS c’est pratique.

Bien le bonjour de Normandie.
hé oui je suis Français, mais personne n’est parfait :slight_smile:
A ton service …

1 Like

Bonjour @Manu.n, is it correct that your approach not only provide a popup but also the ability to choose the number of Choices to display in the choice component (vs limit of 4)?

Can’t wait to see this to understand how you did all this (inc. the Trebuchet)

Hello
You have the demo version, but there is no selection limit.

The bug: I changed the height of the list and add a scroll so that the list is integrated into the “modal window”, but on a mobile the application does not display all the data. I have done some research but for the moment it is a dead end.

I made a little video.

3 Likes

Many thanks, I’ve seen it. If at a point in time you can share it (so that we can see how you build the Trebuchet for the multi-choice), it will be absolutely great!

Bonne soirée

Here’s how I achieve a multiselect:

6 Likes