How do I make Choice Chips scroll horizontally. I wish for them to be in single file line scroll.
I can use css with the business plan.
Based on the labels there, are you sure choice chips are the best component to use?
Your users would have to scroll through a lot of options to find what they need.
In Classic Apps, we were able to do this with some CSS. There’s no great way to do this in new Glide Apps…but it would be nice
3 Likes
Hello friends,
This works, but will be applied to the whole app… every chips type choice component.
Maybe somebody smart would know how to point to the specific component inside a container?
Have a nice day
On the choice component under options give it a class name… then replace .ksbYdv with .YourClassName
1 Like
Exactly or put it in a container and give the container a class name as well.
2 Likes
Hello,
Thanks but im sorry… this won’t apply to the component itself… even if a class is assigned to it.
The choice component for example is composed of several classes inside one. So i can’t target the choice div alone… The class properties will be applied to all the component.
i tried also things like double class: .ksbYdV.customcss1
But it still affect all the component of the app.
It somebody with dev skills could try, that would help. 
Have a nice day,
Martin
Another example.
Lets say i wanted a blue background only on my custom collection card… Her we see it applies to the whole custom collection assembly.
The CSS code applies to the whole component assembly… not something specific inside.
Getting close. Just need to find a way to enable scroll:
.single-row {
width: max-content;
overflow-x: scroll !important;
}
I thought overflow-x: scroll !important; would have made it work, but it doesn’t. Maybe someone else can get it past the finish line.
Try this:
.horizontal ul {
width: 100%;
white-space: nowrap;
overflow-x: auto;
flex-wrap: nowrap;
}
Has a horizontal scroller at the bottom thats kind of annoying, but does the job. You can try and tweak it
Figured it out:
.scroll-container {
overflow:auto;
}
.scroll-container::-webkit-scrollbar {
display: none;
}
.scroll-choice {
width: max-content;
}
5 Likes
Thanks Robert!
1 Like
I don’t know for you guys -it doesn’t work ideally - you need to put the finger over the specific places, hold it for 2 seconds so it scrolls. I am using iphone 14 latest iOS
This is possible in many ways to force Horizontal Scroll, but remember this will be a nightmare of UX on Smartphones 
This is something I always design both ways, horizontal UX in smartphone is just not working.
but can be overwhelmed with media queries, quite easy CSS
I didn’t understand how it could be overwhelmed with media queries? Is there any way to implement horizontal choice chips on smartphones in Glide?
This is an essential component for smartphones like done in Google maps and many other apps
1 Like
I wasn’t having this exact issue, but I did want to be able to design certain things for mobile vs iPad vs desktop. Inevitably, I came up with a way to do this, it’s works pretty great actually.
I created several columns in the main users table for it to finally work, but now I forget that I had done this because it works so well. I’ll list the columns to create, this might give you guys an idea on how to implement this.
The idea is to add specific values in a If-then-else column to compare against the devices width being generated automatically. For instance, if I want to design a component for mobile, I’d make the visibility condition set to only show when “COL3 - iPhone” is checked inside the users table. Since the values are specific to each user, it automatically displays different for everyone.
Same goes for any of the other devices I’ve set up… iPad, iMac, MacBook, etc… just gotta do a little research to find out what screen px width or height you need to enter for the desired effect. Happy to help further if anyone has a question.
COL1 - Device Width (Using Device Info Integration)
COL2 - Device Height (Using Device Info Integration)
COL3 - iPhone (IFTE “mobile” screen width = true)
COL4 - iPad (IFTE “tablet” screen width = true)
COL5 - iMac (IFTE “desktop” screen width = true)
Wouldn’t you want to combine Col3, Col4, Col5 into one and return the “device type”? Say you can create a JS column, if col1 is within this range, AND col2 is within that range, then return “iPhone” and so on.
1 Like
You definitely could, that’s a great idea. 
1 Like
With Glide you can set up a custom CSS class on many things like screens, components in Options.
So, let’s say I want your buttons “Directions / Start / Call” to be displayed horizontally on Desktop and vertically on Smartphone.
I will setup default behaviour of Button Block horizontal, while setting up CSS class as “buttons2”.
Then apply a global CSS class in App Settings like this:
CSS code:
@media screen and (max-width: 768px) {
.buttons2 {
display: flex;
flex-direction: column;
}
}
Flex direction is by default horizontal (row), but you can switch it to vertical with column. I put max-width: 768px but you can increase it according to what you consider is the max viewport width of a smartphone/tablet.
This of course needs testing, I didn’t test it yet with Glide.
This code can also be tweaked to your needs to reverse or force direction according to screen size.
Hope this helps,
2 Likes