Custom CSS - centre a choice component

Hi, I would like to centre a choice component (chips) inside a container. Can someone suggest some CSS that would do this?

Thanks

1 Like

Before jumping into CSS I would try adding a 3 column container and put the choice component in the middle column.

1 Like

I’ve tried that but it doens’t look very good unfortunately

I actually really like the styling of an action row inside a container, is there a way to use the same styling?

Couldn’t you just use the Action Row and have each button set the same column value that the choice component would? I do something similar, but I’m my case I open an overlay when an action row button is clicked.

Yes that is what I had previsouly but I wanted to be able to turn the tabs on an off depending on which user had selected that functionality.

However, I’ve revisted it now and set up chceck box functionaltiy so I’ve reverted back to the action row.

Thank you for the suggestions.

Hvaing said that,
do you know if there is a way to set the visibility of a particilar action in an action row rather than just being able to allow it? Ideally I would like to hide actions that a user doesn’t have access to.

Thanks

Hmm, I can’t find a way to do that with an action row. Do you usually deactivate certain groups of buttons, or is it random? My only thought would be to set up multiple action row components and hide or show each one based on certain conditions. Could work if you deactivate groups of buttons, but not as practical if each button is controlled independently.

It’s random unfortunately but hopefully will be all on soon so it’s not too much of a problem.

1 Like

.choices div {
align-items: center;
}

Here’s the CSS alternative.

6 Likes

Hummm unfortunately this isn’t working in my app. I’ve tried it in demo app and it works just fine but it’s not working in my main one.

Could it be becasue of a hierarchy somewhere?

Can you show us how you’re setting up your container and CSS in the main one?