# CSS Choice Multiple

**URL:** <https://community.glideapps.com/t/css-choice-multiple/27256>\
**Category:** Community Resources\
**Created:** [May 26, 2021, 2:21pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256 "2021-05-26T14:21:09Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 26, 2021, 2:21pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/1 "2021-05-26T14:21:09Z")

</div>

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](https://community.glideapps.com/t/css-customizable-selection/27208)”)  
and I took the opportunity to integrate the “[Trebuchet Method](https://community.glideapps.com/t/advanced-trebuchet-method-list-of-items-users-in-one-cell/25688)” of @Lucas_Pires (thank you lucas)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/3/032d3f50b767db1da933d3146063c5dfc37e0729.png)

Demo

> **[Demo Choice Multiple Public](https://choicemultiple.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 26, 2021, 2:50pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/2 "2021-05-26T14:50:46Z")

</div>

Thanks the shoutout! This feature is slick 🔥

---

<div class="post-metadata">

**Author:** ![Marc-Olivier](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@Marc-Olivier](https://community.glideapps.com/u/Marc-Olivier)\
**Post date:** [June 3, 2021, 12:29pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/3 "2021-06-03T12:29:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 3, 2021, 12:33pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/4 "2021-06-03T12:33:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [June 3, 2021, 12:50pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/5 "2021-06-03T12:50:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Marc-Olivier](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@Marc-Olivier](https://community.glideapps.com/u/Marc-Olivier)\
**Post date:** [June 3, 2021, 3:21pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/6 "2021-06-03T15:21:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 3, 2021, 4:18pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/7 "2021-06-03T16:18:07Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/6/d6be34c0774e10966bd8b0ba575a3c141c3c3bff.jpeg)

Thanks man!

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [June 3, 2021, 4:27pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/8 "2021-06-03T16:27:05Z")

</div>

Hi, can’t you use a date picker?

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 3, 2021, 4:41pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/9 "2021-06-03T16:41:24Z")

</div>

Yes! That was my first option but my client insisted on having choice components. 🤷🏿‍♂️

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 3, 2021, 5:43pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/11 "2021-06-03T17:43:45Z")

</div>

bonjour @SantiagoPerez

something like that ???

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c90ca6a082a4f00b396acda210207cf1c9a19901.png)

```auto
<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.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 3, 2021, 6:16pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/12 "2021-06-03T18:16:01Z")

</div>

@Manu.n

Awesome!!! Exactly like that.

Thanks!!

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 3, 2021, 6:21pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/13 "2021-06-03T18:21:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 3, 2021, 6:24pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/14 "2021-06-03T18:24:22Z")

</div>

I did, man!!!

That is so helpful.

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [June 4, 2021, 1:49am UTC](https://community.glideapps.com/t/css-choice-multiple/27256/15 "2021-06-04T01:49:56Z")

</div>

No way!!! 🙃🙃🙃

Gracias!

---

<div class="post-metadata">

**Author:** ![Marc-Olivier](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@Marc-Olivier](https://community.glideapps.com/u/Marc-Olivier)\
**Post date:** [June 4, 2021, 4:02pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/16 "2021-06-04T16:02:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 4, 2021, 6:27pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/17 "2021-06-04T18:27:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [June 4, 2021, 7:03pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/18 "2021-06-04T19:03:44Z")

</div>

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)?

> [@Manu.n](#):
>
> As soon as I have a little time I see why

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

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 4, 2021, 7:19pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/19 "2021-06-04T19:19:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [June 4, 2021, 7:22pm UTC](https://community.glideapps.com/t/css-choice-multiple/27256/20 "2021-06-04T19:22:40Z")

</div>

> [@Manu.n](#):
>
> You have the demo version

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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 5, 2021, 2:17am UTC](https://community.glideapps.com/t/css-choice-multiple/27256/21 "2021-06-05T02:17:40Z")

</div>

Here’s how I achieve a multiselect:

> **[ConnectPro · Glide](https://www.loom.com/share/7031270b602e4d549b29435531cb26d8)**

[Next page](https://community.glideapps.com/t/css-choice-multiple/27256.md?page=2)