Horizontal Scrolling Choice Chips

[ThinhDinh]

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

[FrancoisDigico]

Good to know Thin,

[dias]

@Robert_Petitto

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

[Jeff_Hager]

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.

[dias]

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.

[Robert_Petitto]

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

[Joe_Gabriele]

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.

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

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