Custom floating buttons: 3 in a row at the bottom of the screen + one with text?

[Tamara_Didenko]

Slowly, but surely, with the help of this awesome community, my app is not only growing in functionality, but also improving in design Spend a good chunk of time yesterday digging into all the tricks this community discovered for using CSS in Glide and starting to get a hold of things there. You can see the progression of the app design in this screenshot:

For the next iteration, as you can see, I’d love to be able to have 3 floating buttons in a row on the bottom of the screen:

• “<” to go to the previous step
• “Mark completed/not completed” – this button needs the most space and a label while the other two could just be icons
• “>” to go to the next step

I know I could probably use the inline list as tiles to make 3 button row, but I am not a fan of that solution because they will all be the same size, and functionally they are not.

Wondering if there’s a way to do this still? Something to do with a combination of 2 floating buttons + one regular one? Any other ideas are welcome as well!

[Uzo]

make it clickable CSS images, you can position and size them any way you want…

Code BOOK

[gvalero]

Hola!

something like this?

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-child(2) {
margin-top: 400px;
margin-left:0%;
width:20%;
height:20px;
}

div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-20px;
margin-left:26%;
width:50%;
height:20px;
}

div[id*='screenScrollView'] > div > :nth-child(4) {
margin-top: -20px;
margin-left:70%;
width:20%;
height:20px;
}

To move 3 buttons at same time to up/down (position), just modify the margin-top value belonging to 1st button:

margin-top: 400px;

Saludos!

[Tamara_Didenko]

Thank you, yes, something like this. However, somehow my percentages are not working. @ThinhDinh was helping me with that with regular buttons. What could be happening?

[Robert_Petitto]

Try this with three floating action buttons:

<pre><span><style>

.fab-target >:nth-child(2) {
right: 50% !important;
transform: translateX(50%);
}

.fab-target >:nth-child(1) {
right: 50% !important;
transform: translateX(50%);
}

.fab-target {
right: 50% !important;
transform: translateX(50%);
}

.fab-target >:nth-child(3) {
right: -108% !important;
}

.fab-target :nth-child(2) {
width: 200px !important;
border-radius: 7px;
height: 45px;
bottom:-58px;
}

.fab-target :nth-child(1) {
border-radius: 7px;
height: 45px;
bottom:-111px;
}

.fab-target :nth-child(3) {
border-radius: 7px;
height: 45px;
bottom:-4px;
}

.fab-target :nth-child(2) :nth-child(1) {
width: 200px !important;
border-radius: 7px;
height: 45px;
}

.fab-target >:nth-child(2) .floating-btn-style :nth-child(1) svg {
fill: transparent;
display: none;
}

.fab-target >:nth-child(2) .floating-btn-style :nth-child(1)::before {
content: "Mark Completed";
align-content: center !important;
font-size: 18px;
font-weight: 600;
color: white;
}

[Tamara_Didenko]

@Robert_Petitto

Try this with three floating action buttons:

Black magic!!! It sure works, but I’ll have to understand how if I hope to modify it to my needs =) I’ll keep the thread open for now for quesitions

[Tamara_Didenko]

ok, maybe I celebrated prematurely after adjusting all other CSS to work with this, it doesn’t work in “production”, aka on device or in the browser

In Glide Editor:

In “browser preview”

[Robert_Petitto]

Looks like you have additional CSS on this screen besides the buttons—they’re probably conflicting somehow…

[Tamara_Didenko]

That’s what I figured but can’t pinpoint how to fix it. I know it worked until I posted your Floating button code (both in the browser and on the device), but after I posted your code, it broke something somewhere (I don’t think it’s supposed to, so it’s a mystery).

Here’s the CSS for the background (it’s in a separate Rich Text component that is always visible):

<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index:-1000;
background: #e8f8f5;
}

Here’s the CSS that controls the Button row (Prev/Next), Action text (Mark completed), Text (Row name), Basic table, Choice components. This Rich text component is visible in all states:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(3) {
margin-top: 10px;
z-index: 2;
}

div[id*='screenScrollView'] > div > :nth-of-type(4) {
margin-top: -15px;
z-index: 1;
}

[data-test="app-inline-picker"] {
background: #e8f8f5;
width: 100%;
border-radius: 8px;
height: 40px;
margin-top: -20px;
z-index: 2;
}

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

div[id*='screenScrollView'] > div > :nth-of-type(5) {
margin-bottom: 10px;
}

div[id*='screenScrollView'] > div > :nth-of-type(2) {
position: fixed;
bottom: 88px;
background: white;
z-index: 15;
width: 100%;
box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.05);
padding-top: 12px;
padding-bottom: 12px;
}

div[id*='screenScrollView'] > div > :nth-of-type(1)  {
position: fixed;
bottom: 0px;
padding-bottom: 20px;
background: white;
z-index: 15;
align-items: center;
width: 90%;
}

This code controls the Inline list (instructions) and Basic table (Total stitches) components, and is only loaded when “Instructions” is selected:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(6) {
background: white;
z-index: 3;
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

div[id*='screenScrollView'] > div > :nth-of-type(7) {
background: white;
padding-bottom: 20px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
z-index: 3;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
margin-left: 10px;
margin-right: 10px;
margin-bottom: 17%;
}

The result in the browser (ignore the gaps around element 1&2, I know how to fix that) – this works as expected:

When Guides is selected, this code loads:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(6) {
background: white;
z-index: 3;
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

div[id*='screenScrollView'] > div > :nth-of-type(7) {
background: white;
z-index: 3;
margin-left: 10px;
margin-right: 10px;
}

div[id*='screenScrollView'] > div > :nth-of-type(8) {
background: white;
z-index: 3;
margin-left: 10px;
margin-right: 10px;
}

div[id*='screenScrollView'] > div > :nth-of-type(9) {
background: white;
z-index: 3;
margin-left: 10px;
margin-right: 10px;
}

div[id*='screenScrollView'] > div > :nth-of-type(10) {
background: white;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
z-index: 3;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
margin-left: 10px;
margin-right: 10px;
margin-bottom: 17%;
padding-bottom: 20px;
}

And this is what the result looks like in the browser – as you can see somehow everything is gone, even the elements that are visible on the “Instructions” or “Notes” tabs

This is code for “Notes” state:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(6) {
background: white;
padding-top: 5px;
z-index: 3;
margin-left: 10px;
margin-right: 10px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
padding-bottom: 20px;
}

div[id*='screenScrollView'] > div > :nth-of-type(7) {
background: white;
padding-top: 5px;
z-index: 3;
margin-left: 10px;
margin-right: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 200px;
padding-bottom: 20px;
}

And the result in the browser

Again, at this point, I’ve removed the Floating buttons, but the problem persists. I can see everything properly in the Editor, but not on the device or in the browser preview.

[Tamara_Didenko]

Ok, so, went on quite an adventure to figure this out. In the end, this post with the prototype linked put me on the right path.

Use Floating buttons to target them by title

@Roldy

Due to the fact that the float button has the customizable title attribute which is normally used as a tooltip, we can use this to select exactly that element.

Using this insight, I created 3 floating buttons and named them. It allows you to target a specific floating button (not dependent on where it is on the page).
As far as I can tell, the underlying HTML for floating buttons looks like this:

<button title="Your title">
   <div class="floating-btn-style">
      <div>
         <svg>...</svg>
      </div> 
   </div>
</button>

So, knowing that, I was able to place and

<pre><span><style>

/* adjust button component here: position, size, shadows, etc. */
[title="Mark complete"] {
position: fixed;
bottom:50px;
left:23%;
width:54%;
height: 60px;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}

/* "visible" part of styling goes here: button color, border, border-radius, etc. */
[title="Mark complete"] > div.floating-btn-style {
background: #53B7AD;
border-radius: 16px;
}

/* adding text to the middle button */
[title="Mark complete"] > div.floating-btn-style::before {
content: "Mark completed";
color: white;
font-size: 16px;
margin-right: 8px;
font-weight: 600;
}

/* style the icon here */
[title="Mark complete"] > div > div > svg {
fill: white;
width: 24px;
}

---

Still some problems with the placement though…

So far, this was the most stable CSS structure as far as the sizing/placement of the buttons goes. Except for when I try to style a list above to have margins, I run into issues again.

I’m not sure how to enable copying apps with the new team structure. I’d be happy to share it if anyone wants to dig in…

3 floating buttons prototype

[Uzo]

try to use vw instead of px
that will adjust to your screen size

[Tamara_Didenko]

Different-looking result, but somewhat similar behavior, aka random one Looks fine in the editor (so I can adjust the values of vw all day long, but once I view it on a device, this is the result:

[Uzo]

did you change all px in your code? in all lines

[11183]

vw in editor and vw on actual device are not the same. vw means Viewport Width so in editor it likely would be smth like 1440 or so while on iphone 12 for example it’s 390

[Uzo]

yep… use % instead, that should do it

[11183]

If only we could wrap these three buttons with a div… Flexbox would solve this in a couple of lines. Ah dreams dreams dreams)

[Tamara_Didenko]

@11183

If only we could wrap these three buttons with a div… Flexbox would solve this in a couple of lines. Ah dreams dreams dreams)

Seriously!!!

@Uzo

yep… use % instead, that should do it

Neither changing it to vw nor to % (made sure that those measurements are consistent throughout the entire code, not just button CSS) produces a stable result on a device…

vw

%

I really wish I could share the prototype to be copied but the checkbox disappeared for teams

[Uzo]

you cant share it when you use the experimental code column…
I did one project like that… it is hard to match all devices
I think you gonna have to position your divs in the center and then just move them to the left or right from the center… not from the edge of the screen… so position all your elements in the center first… then wrap them in separate divs, and move these divs left and right… or simply use calc ()

[Tamara_Didenko]

@11183

If only we could wrap these three buttons with a div… Flexbox would solve this in a couple of lines. Ah dreams dreams dreams)

That said… we actually don’t need to, because there is already a div wrapped around it, and it has a class name

So, after realizing it and overriding a few properties, voila! Worked like a charm! \

Final code:

<pre><span><style>

/* This is the code for floating buttons container: adjust position, margins, flex, etc */
.fab-target {
flex-direction: row !important;
left:16px !important;
right:16px !important;
bottom:16px !important;
justify-content: space-between;
gap:8px;
}

/* css button of: Prev */
[title="Prev"] {
display: inline;
width:60px;
height: 60px;
order:0;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1)); 
}

[title="Prev"] > div.floating-btn-style {
background-color: white;
border-radius:1vw;
border: 1px solid #E0E0E0;
}

[title="Prev"] > div > div > svg {
fill: #53B7AD;
}

/* CSS code for "Mark completed" */

/* adjust button component here */
[title="Mark complete"] {
height:60px;
order:1;
flex-grow:4;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}

/* "visible" part of styling goes here */
[title="Mark complete"] > div.floating-btn-style {
background: #53B7AD;
border-radius: 1vw;
}

/* adding text to the middle button */
[title="Mark complete"] > div.floating-btn-style::before {
content: "Mark completed";
color: white;
font-size: 18px;
margin-right: 8px;
font-weight: 600;
}

/* style the icon here */
[title="Mark complete"] > div > div > svg {
fill: white;
width: 23px;
}

/* css button of: Next */
[title="Next"] {
width:60px;
height:60px;
order:2;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1)); 
}

[title="Next"] > div.floating-btn-style {
background-color: white;
border-radius:1vw;
border: 1px solid #E0E0E0;
}

[title="Next"] > div > div > svg {
fill: #53B7AD;
}

[11183]

Ha! Brilliant💎