# Is this type of popup doable in Glide?

**URL:** <https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208>\
**Category:** Ask for Help\
**Created:** [March 29, 2022, 9:17am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208 "2022-03-29T09:17:31Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [March 29, 2022, 9:17am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/1 "2022-03-29T09:17:31Z")

</div>

Hi! I am wondering if this popup menu is doable in Glide? 👇

If I only have 2 choices, then a button bar would work, but if I have more choices, I thought this would be nice.

![Popup Menu](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c3688c89170dd36c95fb668bc3a3e69c1d84c62.gif)

---

<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:** [March 29, 2022, 9:32am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/2 "2022-03-29T09:32:57Z")

</div>

You could get close to this with clever use of visibility conditions, and maybe a bit of CSS.

---

<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:** [March 29, 2022, 1:13pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/3 "2022-03-29T13:13:13Z")

</div>

Now this is where I wish we can have “tag names” for floating buttons. I have implemented something like @Trading_5_Talents showed, but with floating buttons. It is not really user-friendly if they don’t get what icons relate to what functions.

---

<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:** [March 29, 2022, 1:23pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/4 "2022-03-29T13:23:52Z")

</div>

I was thinking you could just use standard buttons and apply a bit of styling.

Although, thinking more about that I guess the big challenge would be anchoring them to the bottom of the screen.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 29, 2022, 11:49pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/5 "2022-03-29T23:49:04Z")

</div>

Yes… you can use visibility conditions on floating action buttons. One button sets a T/F value…the others show up when the condition is T

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [March 30, 2022, 10:53pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/6 "2022-03-30T22:53:08Z")

</div>

Awesome, that worked very well, thanks!

So then is it possible to make the buttons oval like the example above so text can be added?

Also, would you happen to know the CSS to control the colors of each floating button?

![Menu Buttons](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/822ac3f18aab541a35655decb7bf778053210817.gif)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 30, 2022, 11:40pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/7 "2022-03-30T23:40:57Z")

</div>

You can use CSS to accomplish this, yes. You’ll need to target the component as it relates to its order on the screen. Adding text is possible, but to do so, you’ll need to use CSS to hide the icon and add `::after` text using `content`:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1416c9dfb28c43f78191af478d33ca86b37aebc.gif)

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [March 31, 2022, 12:22am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/8 "2022-03-31T00:22:42Z")

</div>

This is 🔥

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [March 31, 2022, 6:19pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/10 "2022-03-31T18:19:56Z")

</div>

Hello! So I am able to get this far now, but I’m not sure why the text is duplicated on the buttons?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/4862aedfb3705606882c2c0a115df3345b0efc8d.png)

Here’s the code I’ve managed to put together based on several posts and Google searches 😟

````auto
<pre><span><style>

.fab-target > * {
    width: 140px;
    height: 40px;
}

[title="Edit"] div::after {
    content: "Edit";
    color: #fff;
    font-size: 120%;
    font-weight: bold;
}

[title="Duplicate"] div::after {
    content: "Duplicate";
    color: #fff;
    font-size: 120%;
    font-weight: bold;
}

[title="Add"] div::after {
    content: "Add";
    color: #fff;
    font-size: 120%;
    font-weight: bold;
}

[title="Close"] div::after {
    content: "Close";
    color: #4DB848;
    font-size: 120%;
    font-weight: bold;
}

.fab-target :nth-child(4) > * {
    background-color: #fff;
    border: 2px solid;
    border-color: #4DB848;
}

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

---

<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:** [April 1, 2022, 12:18am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/11 "2022-04-01T00:18:26Z")

</div>

I believe you need to target individual buttons using `nth-child()`.  
Because you’re not doing that, the title styling is being applied to all of them.

---

<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:** [April 1, 2022, 12:44am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/12 "2022-04-01T00:44:07Z")

</div>

The reason for that is @Trading_5_Talents was using div::after on the button that has 2 divs, not 1.

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

Here’s 1 (named-icons…)

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

Here’s 2 (floating-btn-style)

I like to keep the icons, so here’s what I come up with.

```auto
<pre><span><style>

.fab-target > * {
    width: 140px;
    height: 40px;
}

[title="Edit"] div[class*="named-icons"] svg {
width: 14px;
height: 14px;
}

[title="Edit"] .floating-btn-style::after {
    content: "Edit";
    color: #fff;
    font-size: 120%;
    font-weight: bold;
}

[title="Duplicate"] .floating-btn-style::after {
    content: "Duplicate";
    color: #fff;
    font-size: 120%;
    font-weight: bold;
}

[title="Duplicate"] div[class*="named-icons"] svg {
width: 14px;
height: 14px;
}

[title="Add"] .floating-btn-style::after {
    content: "Add";
    color: #fff;
    font-size: 120%;
    font-weight: bold;
}

[title="Add"] div[class*="named-icons"] svg {
width: 14px;
height: 14px;
}

[title="Close"] .floating-btn-style::after {
    content: "Close";
    color: #4DB848;
    font-size: 120%;
    font-weight: bold;
}

[title="Close"] div[class*="named-icons"] svg {
width: 14px;
height: 14px;
fill: #007E7E;
}

.fab-target :nth-child(4) > * {
    background-color: #fff;
    border: 2px solid;
    border-color: #4DB848;
}

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

```

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

---

<div class="post-metadata">

**Author:** ![Trading\_5\_Talents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trading_5_talents/32/33858_2.png) [@Trading\_5\_Talents](https://community.glideapps.com/u/Trading_5_Talents)\
**Post date:** [April 1, 2022, 12:54pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/13 "2022-04-01T12:54:16Z")

</div>

Oh wow! Very nice! Thank you all!

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [April 1, 2022, 12:58pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/14 "2022-04-01T12:58:32Z")

</div>

Great work @ThinhDinh 💪

Now I wonder if we can change the way how a **Choice component** shows its options from Chips style to something similar to vertical buttons.  
I mean, I have this:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/a/3ac73a645a64e4a7bdd08f0554a1e0803f15e9fc.png)

but I’d like to show:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/5/b55748fa9970d0aec984fd6bae6c1e393219ea91.png)

Do you have any useful trick for this?  
Gracias brother!

---

<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:** [April 2, 2022, 12:59pm UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/15 "2022-04-02T12:59:18Z")

</div>

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

---

<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:** [April 8, 2022, 12:39am UTC](https://community.glideapps.com/t/is-this-type-of-popup-doable-in-glide/40208/16 "2022-04-08T00:39:50Z")

</div>

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

Hope this helps.

```auto
<pre><span><style>

div[id*="screenScrollView"] > div > :nth-of-type(1) :nth-of-type(1) {
display: table;
margin-left: auto;
margin-right: auto;
}

```