Choice component dropdown style: Grid

Feature Requests
, ,
1

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
image1939×761 108 KB

1 Like
2

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

Screenshot 2024-10-26 at 12.34.40
Screenshot 2024-10-26 at 12.34.40858×1006 75.6 KB

Screenshot 2024-10-26 at 12.14.27
Screenshot 2024-10-26 at 12.14.27852×1012 76.8 KB

Required Switch-Off (with distinctive blank option)

/* 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)

/* 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;
}
2 Likes
3

thanks so much @Himaladin !! :smiling_face_with_three_hearts:

1 Like
4

I added this:

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

It’s perfect.

image
image407×473 27.2 KB

1 Like
5

Fast response huh… :sweat_smile:

1 Like
6

you’re a CSS genius

7

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

8

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

9

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:

#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.

10

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

11

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

12

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

1 Like