Is this type of popup doable in Glide?

[Trading_5_Talents]

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.

[Darren_Murphy]

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

[ThinhDinh]

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.

[Darren_Murphy]

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.

[Robert_Petitto]

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

[Trading_5_Talents]

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?

[Robert_Petitto]

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:

[kyleheney]

This is

[Trading_5_Talents]

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

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

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

[Darren_Murphy]

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.

[ThinhDinh]

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

Here’s 1 (named-icons…)

Here’s 2 (floating-btn-style)

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

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

[Trading_5_Talents]

Oh wow! Very nice! Thank you all!

[gvalero]

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:

but I’d like to show:

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

[ThinhDinh]

Hope this helps.

<pre><span><style>

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