# Choice component dropdown style: Grid

**URL:** <https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335>\
**Category:** Feature Requests\
**Tags:** choice, components, style\
**Created:** [October 25, 2024, 7:43pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335 "2024-10-25T19:43:40Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 25, 2024, 7:43pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/1 "2024-10-25T19:43:40Z")

</div>

It would be great to also have a choice component, **dropdown menu style** option: “Grid”.

At the moment, we scroll ad infinitum to view the dropdown options but in some cases a grid-style dropdown menu would allow a more efficient use of time and screen real estate.

What do you think?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e148e3a8c9c233be2c92177aa505b6bc446187ce.jpeg)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 26, 2024, 5:38am UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/2 "2024-10-26T05:38:13Z")

</div>

Sekayi, here is the CSS code you requested (class name: **choice-grid** ):

 ![Screenshot 2024-10-26 at 12.34.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/9483930ccd1980618a566ece4325437af1125a09.png)  
 ![Screenshot 2024-10-26 at 12.14.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/7750d539bf80551276d0febb5f4b180853ae5a41.png)

### Required Switch-Off (with distinctive blank option)

```auto
/* Choice Dropdown Grid */
#root:has(#page-root .choice-grid [data-testid="wc-trigger"][data-state="open"]) #app-modal-root > div > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  padding: 0.75rem;
  text-align: center;
  gap: 5px;
}
#root:has(#page-root .choice-grid [data-testid="wc-trigger"][data-state="open"]) #app-modal-root > div > ul > li:not(:first-child) {
  font-size: 30px;
}

/* Exclude for first li */
#root:has(#page-root .choice-grid [data-testid="wc-trigger"][data-state="open"]) #app-modal-root > div > ul > li:first-child {
  grid-column: 1 / -1;
  text-align: left;
}

```

### Required Switch-On/Off (uniform)

```auto
/* Choice Dropdown Grid */
#root:has(#page-root .choice-grid [data-testid="wc-trigger"][data-state="open"]) #app-modal-root > div > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  padding: 0.75rem;
  text-align: center;
  gap: 5px;
}
#root:has(#page-root .choice-grid [data-testid="wc-trigger"][data-state="open"]) #app-modal-root > div > ul > li {
  font-size: 30px;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 26, 2024, 1:17pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/3 "2024-10-26T13:17:36Z")

</div>

thanks so much @Himaladin !! 🥰

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 26, 2024, 1:32pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/4 "2024-10-26T13:32:58Z")

</div>

I added this:

```auto
#root:has(.choice-grid) #app-modal-root > div > label {
display: none;
}

```

It’s perfect.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/7665257d446acf02977a89cb1ad03fa1065b8c9e.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 26, 2024, 1:36pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/5 "2024-10-26T13:36:43Z")

</div>

Fast response huh… 😅

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 26, 2024, 1:37pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/6 "2024-10-26T13:37:36Z")

</div>

you’re a CSS genius

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 26, 2024, 3:53pm UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/7 "2024-10-26T15:53:44Z")

</div>

> [@Sekayi\_Liburd](#):
>
> ```auto
> #root:has(.choice-grid) #app-modal-root > div > label {
> display: none;
> }
> 
> ```

Your code will hide the search element from all Choice components on the same screen, not just .choice-grid. Is this your intention?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 27, 2024, 2:07am UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/8 "2024-10-27T02:07:47Z")

</div>

yes, this is something you wrote for me in the past because I did not want the search feature.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 27, 2024, 2:29am UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/9 "2024-10-27T02:29:12Z")

</div>

If your number of options exceeds a certain limit Glide will hide the rest, that’s the search function.  
However if you just want to limit the current component then the code should be:

```auto
#root:has(#page-root .choice-grid [data-testid="wc-trigger"][data-state="open"]) #app-modal-root > div > label {
  Display: none;
}

```

This ensures the choice-grid has an open data-state.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 27, 2024, 2:43am UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/10 "2024-10-27T02:43:10Z")

</div>

I’m not sure what you mean by “limit the current component”.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 27, 2024, 2:49am UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/11 "2024-10-27T02:49:34Z")

</div>

I mean this last code only removes the search feature on the component you named choice-grid.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [October 27, 2024, 2:51am UTC](https://community.glideapps.com/t/choice-component-dropdown-style-grid/77335/12 "2024-10-27T02:51:16Z")

</div>

ok. I’ll keep the code in stock but I just don’t want that search anywhere to be honest. 😁