# How to change a choice component to a menu?

**URL:** <https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723>\
**Category:** Ask for Help\
**Created:** [October 14, 2022, 11:45am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723 "2022-10-14T11:45:59Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 14, 2022, 11:45am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/1 "2022-10-14T11:45:59Z")

</div>

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.](https://www.notion.so/Choice-component-as-a-menu-3528cd977b80429996abf44b98ad5dc7)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

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

 ![2011e028-cd68-4f42-a4b4-57ad3147e464](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/77e510cc6045058171b216f929565b4f08c19cf1.jpeg)

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:

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

```

However it takes all values of the screen

So currently stuck with this :

 ![Screenshot 2022-10-14 at 12.40.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/2/b213efa6868e38d1325c5edf1886f1ccf7d702cd.png)

```auto
<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;
}

```

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 14, 2022, 11:59am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/2 "2022-10-14T11:59:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 14, 2022, 12:11pm UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/3 "2022-10-14T12:11:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 14, 2022, 6:48pm UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/4 "2022-10-14T18:48:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 15, 2022, 12:45am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/5 "2022-10-15T00:45:41Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c686f06e7490b5c662f70b2b6267e41262ef0f6.png)

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 17, 2022, 11:42am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/6 "2022-10-17T11:42:46Z")

</div>

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:

 ![Screenshot 2022-10-17 at 13.39.05](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/4/f41796107ba6f7506268f7d6738b6089d78f9cac.png)

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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 17, 2022, 12:39pm UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/7 "2022-10-17T12:39:50Z")

</div>

> [@KPT](#):
>
> [data-test=“app-inline-picker”] ::after

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/d/7d900b1c4489ed58c428a4d68dcc3f6f8d14c385.png)

> [@KPT](#):
>
> [data-test=“app-inline-picker”] .current

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a137f304b22020a9fc9ab830b84a87f80ec5025.png)

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?

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 18, 2022, 6:19am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/8 "2022-10-18T06:19:33Z")

</div>

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

 ![Screenshot 2022-10-18 at 08.17.10](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/8/984e3fe4b37f38bfba7613fd0690a5e151e8ec22.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 19, 2022, 12:21am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/9 "2022-10-19T00:21:22Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/d/ad6ea5ac8b41f17303cac6f60d63aa7d747f5775.png)

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [October 19, 2022, 4:56am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/10 "2022-10-19T04:56:55Z")

</div>

Thank you.

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

```auto
[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
}

```

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [October 20, 2022, 4:57am UTC](https://community.glideapps.com/t/how-to-change-a-choice-component-to-a-menu/51723/11 "2022-10-20T04:57:18Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.