CSS Choice Multiple

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

I remember following one of your earlier tutorials to create a private leaderboard on my very first Glide app, which I’m actually still using. But watching this made me realise that I need to get rid of that and replace it with a trebuchet-driven one :grinning:

2 Likes

Thanks @Robert_Petitto! This is a great help for this “Multiselect” topic which is continuously coming back here.

Hopefully Glide will make it native one day…
Thanks again

1 Like

LOVE the trebuchet method for a variety of reasons. Only issue with it is that I can’t associate a second value to the original value I’m adding to the array.

Eg. Let’s say I’m tracking who has completed a video training. I can use the trebuchet method to create an array of emails of users that marked the training complete and thus track WHO completed the training, but I can’t associate a second value like a timestamp to track WHEN their email address was added to the array.

heh, I was just thinking about a somewhat similar use case. For a while now, I’ve had it in my mind that the trebuchet method would be ideal for recording hole by hole scores in a golf app.

So for example, a 9 hole round of golf recorded in a single column might look like:

5,6,3,4,6,3,5,4,5

The kicker is that the ordering of the items is critical, as each number corresponds to a specific hole.

So that means I’d need a way to either maintain the order of the elements, or associate each one with a second value that would provide a reference to the hole number.

My gut tells me that this is a problem that can be solved, just haven’t had a chance to play around (no pun intended) with it yet.