# Horizontal Scrolling Choice Chips

**URL:** <https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106>\
**Category:** Ask for Help\
**Created:** [September 13, 2023, 8:21pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106 "2023-09-13T20:21:38Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 1, 2024, 11:14pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/21 "2024-06-01T23:14:35Z")

</div>

> [@FrancoisDigico](#):
>
> This of course needs testing, I didn’t test it yet with Glide.

Media query does work, I have used it in a few projects.

---

<div class="post-metadata">

**Author:** ![FrancoisDigico](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francoisdigico/32/75651_2.png) [@FrancoisDigico](https://community.glideapps.com/u/FrancoisDigico)\
**Post date:** [June 2, 2024, 3:23am UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/23 "2024-06-02T03:23:02Z")

</div>

Good to know Thin,

---

<div class="post-metadata">

**Author:** ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)\
**Post date:** [June 2, 2024, 5:43pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/24 "2024-06-02T17:43:07Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> .scroll-container {
> overflow:auto;
> }
> 
> .scroll-container::-webkit-scrollbar {
> display: none;
> }
> 
> .scroll-choice {
> width: max-content; 
> }
> 
> ```

Hey Robert, this code, when I apply it to my apps, it doesn’t seem to work, even when Preview CSS is on.

I’ve pasted the code in correctly… Any idea why it’s doing this? I’ve done it on the CSS part in Appearance under Settings too and even that doesn’t seem to work.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [June 2, 2024, 7:53pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/25 "2024-06-02T19:53:46Z")

</div>

Looking at your previous post edits, I see that you had placed the CSS in the component’s CSS Class section. That is meant for giving your component a unique CSS class name only. All CSS still goes into the Appearance setting. If you have both filled, that may still be causing issues.

---

<div class="post-metadata">

**Author:** ![dias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dias/32/75988_2.png) [@dias](https://community.glideapps.com/u/dias)\
**Post date:** [June 2, 2024, 9:00pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/26 "2024-06-02T21:00:50Z")

</div>

I realized that earlier and put it into appearance, I removed it from class, which is why I edited my post, yet it didn’t apply correctly.

---

<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 2, 2024, 10:03pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/27 "2024-06-02T22:03:05Z")

</div>

If you’re using my CSS, you’ll need to tag the choice component with `scroll-choice` and put that choice component in a container tagged with `scroll-container`

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/6/b67bfeadbc8583c905b6586633854252959e3eb4.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/99809ae0fb2d75b188b34fdea3f1e23f21eac374.png)

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [June 8, 2024, 2:57pm UTC](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106/28 "2024-06-08T14:57:34Z")

</div>

This seems to work well and keeps the title of the Choice fixed. Add .horizontal-choice to the Choice component itself and not the container. However, sometimes it scrolls across smoothly and other times it feels a little sticky.

```auto
.horizontal-choice ul::-webkit-scrollbar {
  display: none;
}

.horizontal-choice ul {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    flex-wrap: nowrap;
}

```

[Previous page](https://community.glideapps.com/t/horizontal-scrolling-choice-chips/66106.md?page=1)