How to change a choice component to a menu?

[KPT]

I’m trying to convert a choice component to a menu as seen in this tutorial:

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

However I’m trying to change the look to be more like the Whatsapp header where the color of the header continues down.

I’ve been experimenting with different background settings on the choice component but it only fills out the tags not the whole background, plus I can’t figure out how to disable the empty state of the choice component to get rid of the ‘-’.

Does anyone know how I can achieve this look?

I’ve tried this to get rid of the empty state:

[data-test="app-inline-picke -item"] {
display: none;
}

However it takes all values of the screen

So currently stuck with this :

<pre><span><style>

[data-test="app-inline-picker"] {
background: #c94d37;
}

[data-test="app-inline-picker"] ::after{
display: none;
}

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: #ec9f31 solid 2px;
margin-bottom: -4px;
border-radius: 0px;
box-shadow: none !important;
}

[Darren_Murphy]

@KPT

plus I can’t figure out how to disable the empty state of the choice component to get rid of the ‘-’.

To get rid of that you have to make the choice selection required.

I’ll pass on the CSS stuff - there are others around that know that much better than me.

[KPT]

ahhh - just when you thought you’ve tried it all…

[KPT]

@Darren_Murphy

I’ll pass on the CSS stuff - there are others around that know that much better than me.

I hope someone else will pick up on this

[ThinhDinh]

Closest I can get. Haven’t had time to check how to remove the line between the top bar and the choice component.

<pre><span><style>

[data-test="app-inline-picker"] {
background: #007E7E;
}

[data-test="app-inline-picker"] ::after{
display: none;
}

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: white solid 2px;
margin-bottom: -4px;
border-radius: 0px;
box-shadow: none !important;
font-weight: 700;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) {
background: #007E7E;
padding-top: 0px;
}

div[class*="inline-pivot-view"] {
color: white;
}

Make sure you put the choice component 1st on your list of components.

[KPT]

This is beautiful - thank you a million times for taking your time to do this.

I guess my main question is where do you figure out what to target?
Fx where do you find these fx:
[data-test=“app-inline-picker”] .current
[data-test=“app-inline-picker”] ::after

As they’re not in the elements when trying to find the id’s and classes.
Experience? or is there a way to find these?

I currently have this:

I’ve tried to take the red empty space away under the line with some padding and playing around with the margins.
But padding I can only add more padding so the empty space becomes bigger and adding negative margin takes away the margin between the component and the card component.

Is there a way to do this?

[ThinhDinh]

@KPT

[data-test=“app-inline-picker”] ::after

@KPT

[data-test=“app-inline-picker”] .current

No tips really, I just click on the element I want and play around until I get the right result.

@KPT

I’ve tried to take the red empty space away under the line with some padding and playing around with the margins.
But padding I can only add more padding so the empty space becomes bigger and adding negative margin takes away the margin between the component and the card component.

What exactly do you want as the outcome?

[KPT]

@ThinhDinh

No tips really, I just click on the element I want and play around until I get the right result.

Ahhh - didn’t see the lower part of the inspector, but that makes a lot of sense now.

@ThinhDinh

What exactly do you want as the outcome?

I’m trying to get rid of the the space under the line or ideally move the line further down so it sits all the way at the bottom of the component.

[ThinhDinh]

<pre><span><style>

[data-test="app-inline-picker"] {
background: #007E7E;
}

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: white solid 2px;
border-radius: 0px;
box-shadow: none !important;
font-weight: 700;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) {
background: #007E7E;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) >div {
padding-bottom: 0px;
}

div[class*="inline-pivot-view"] {
color: white;
}

This is the most I can do.

[KPT]

Thank you.

I’ve added negative margin to this section and it seems to do the trick

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: white solid 2px;
border-radius: 0px;
box-shadow: none !important;
font-weight: 700;
margin: -3px; !important
}