How to center chips with CSS?

[KPT]

I’ve tried to center some chips in a choice component and give them the same width with CSS to look like this:

I’m quite new to CSS, so I was super chuffed when I got this to happen on my own screen with the following code:

<pre><span><style>


.hyLuov {
margin: auto !important;
}

.epQbSL .size-item {
width: 50px;
text-align: center !important;
}

However I discovered that this does not stay like this when I publish my app, because I’m not targeting classes or ID’s but just names.
I’ve been trying to figure out how to target the correct elements for the past hours and my head is about explode.

Can anyone help?

[ThinhDinh]

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

Check this guide to see if it helps. If I recall right the choice component does not have a stable class name.

[Uzo]

div[id*='screenScrollView'] > div > :nth-child(1) {
margin:auto !important;
}

[KPT]

seems I can only find some for changing a segmented choice component

[KPT]

This works.
Is there a way to target the width of the chips?
I tried to add some white space around the emojis, but didn’t make the chips wider.

[Uzo]

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(2) {
margin:auto !important;
transform: scale(1.5) !important;
}

[ThinhDinh]

Not sure what you mean, the link basically contains the same code as Uzo stated above.

[KPT]

Ahh sorry, didn’t look in the actual link - I thought you meant to look through some of the projects to see if any of them where styling a choice component.
But yes, you’re right - I just couldn’t see the woods for trees.

[KPT]

When using transform and scale it make the chips both taller and wider. I can see how this would work for a text. But what I’m trying to do is the below:

Currently it looks like this:

And using the transform it looks like this:

Thank you again for taking you time to help me with this.

[Uzo]

inspect the element and change the target class

.nEAaW {
    display: inline-block;
    position: relative;
    margin: 0px 4px 4px 0px;
    padding: 8px 46px !important;
    color: rgb(17, 17, 17);
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    border-radius: 100px;
    overflow: hidden;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.1875rem;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

[KPT]

I’m trying to figure out how I can get this to work.
But I don’t seem to understand how I can target the right class.

I tried something like this

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(5) {
margin:auto !important;
}

[data-test="sc-hxqtlr epQbSL current"] >div {
width: 100px !important;
}

and I tried this

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(5) {
margin:auto !important;
}

[data-test="sc-hxqtlr.epQbSL.current"] >div {
width: 100px !important;
}

But it doesn’t work.
I’m not sure I’m understanding how to target the right class.
Below is the names I think is the class names - is that correct?
or am I misunderstanding everything?

[Uzo]

find and replace class… I give you the whole code, so is easier for you to find it… then just paste that:

.nEAaW {
padding: 8px 46px !important;
}

replace .nEAaW

[KPT]

I’m a little unsure how I can replace the class

I did this:

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(5) {
margin:auto !important;
}

</style></span></pre>

<div class="nEAaW"></div>

<pre><span><style>
.nEAaW {
padding: 8px 46px !important;
}
</style></span></pre>

But it doesn’t really do much

[Uzo]

I told you to find and replace .nEAaW
use inspect tool. Each app has a unique class for that.
also, no need for creating a div for it

[KPT]

but I think my problem is I don’t know exactly how to replace with css…?

[Uzo]

inspect that element, and find the class… I can’t help you… unless you share the link to your app, then I can look for you

[KPT]

I’ll send you a DM with the link - I really appreciate

[Himaladin]

Please try replacing :nth-child(n) with :nth-of-type(n)

[KPT]

@KPT

padding: 8px 46px !important;

Still the same.
@Uzo helped me to replace the class, which did the trick - however it didn’t convert to the phone. So I kind of given up and have to design another solution.

[Himaladin]

Try to copy this code and replace the sequence number according to your component number.

div[id*='screenScrollView'] > div > :nth-of-type(n) {
margin: auto;
}
div[id*='screenScrollView'] > div > :nth-of-type(n) div:nth-of-type(1) >div {
padding: 5px 5px !important;
}