How to create a Sticky button?

Hi guys,

Anyone know how to make an element (a button for example) sticky?
So that it always sticks in the bottom of the screen
like this:

Hi! I cover this topic in this tutorial!

Hi Mevi! Does that still work? I tried it on my project and although it stayed at the bottom of the page, it wasn’t sticky.

had this same problem

@Tristan_Hakert @jordan_vd_berk Some things to double-check:

  1. Set the component to Absolute.

  2. Set a higher z-index number than the default (i.e. 1000 to ensure it always floats above anything else with a lower value).

  3. You’ll also see a dropdown in the Position tab set to “Top” by default. Set to “Bottom” and put 0 or a higher number in the number field to the right. 0 sets it firmly on the bottom of the screen. Higher number function sort of as margins to push it up.

  4. Oh, and this is critical! Make sure the button or whatever the component is set on the Page Layout in the tree, NOT other holding containers that you might be nesting things like text and images into. Again, it should be its own master component on the Page Layout.

As far as I can remember, that’s all I did with positioning to create a floating mobile-style header for our web app to work responsively on mobile devices. Let us know, folks.

Screen Shot 2021-03-02 at 2.41.52 PM
I have all that but it still isn’t working /:
also, it’s just attached to the last component the screen (i.e. if I delete a paragraph at the bottom it moves up to the thing above it)

Oh, from what I can see in the tree, it doesn’t look like you’re using a scroll view. Sticky-type components won’t work on Appgyver without a scroll view! I’ll include screenshots from my own example for a floating header – just a different form of what you’re trying to do with your button.

  1. All of your primary page content (Container 1) needs to be set into the scroll view. You can drag scroll views from your components dashboard on the left side of Composer. Then drag Container 1 directly into the scroll view. Basically, we’re creating our own on-screen scrolling function. Make sure the scroll view is set directly on the Page Layout!
    1

  2. The scroll view should be set to 100% width and height, respectively.
    2

  3. Click the Page Layout in the tree, then click the Style tab and scroll to the bottom and ensure that the “Disable scroll” and “Stretch to viewport height” boxes are checked. Depending on your personal preference, you may also wish to set the page padding to 0 as I have. Entirely up to you.

  4. Here’s an overall screenshot below of the page I’ve using for this example. If you look down at the tree, you’ll see I’ve marked “con_Header1_pcMaster” and “sv_PC_master”. These are my shorthand names for the desktop-responsive versions of 1. The white custom header container at the top with “Querious” and the link icons (it’s also currently selected in the screenshot), and 2. The name of the scroll view in which everything else below the header container has been set into (which you can see in the tree, including your “Container 1”). Again, you can also see that both components are children of the Page Layout.

  5. Everything that I mentioned in the previous post for your button still applies. My header, in this case, is equivalent to your button. If done correctly, the end result for me is a floating header, and for you, a floating button. :slight_smile: Also note that, in our case, we’re building a web app, thus, a desktop width screen, as well as testing it in the Appgyver Preview Beta rather than a mobile device. No matter! The same practices still apply, regardless!

Note how the head floats and remains at the same position! As I mentioned before, directly using “sticky” is not currently possible. Thus, we use this hack to get around that limitation. Let me know if it works for you!

1 Like

That fixed it! I can tell that took a lot of time - Thanks! :star_struck:
Side note: I don’t know what your app is, but the name “Querious.me” sounds like it’s for people curious about their sexuality…
oh also the positioning works but now the button logic doesn’t.

Glad it worked for you. It’s not a perfect solution, but it’s the best we have until Appgyver brings support for a greater selection of positioning parameters.

Querious/Queryous is more a working title right now. It’s a play on “Query” (v. to ask or inquire; n. a question) and “Curious”. As you might have gathered, everything on the profile page in the pictures and gif above is set up to allow one eventual user to ask another user questions anonymously or openly, to which the second user can answer. If you’ve ever used Ask.fm or Tellonym, it’s in a similar vein. Thus, “Curious Me: Ever Curious About You”.

P.S. It’s not lost on us that there actually is a community on the web called “Queerious” for just that subject of sexual exploration. No relation. We may use the name in the end – or maybe not. :slight_smile:

Are you using a custom button (a container with a background color, text/icons, and logic) or an actual button component? How does the logic not work exactly?

1 Like

lol
yeah im using a custom button - it’s a container with an icon inside

But what is your logic exactly? Perhaps, you could screenshot it and describe what you’re trying to do.

it’s a recipe app and I want users to be able to click an up arrow to scroll back to the top. I found the “scroll to” button in the flow function market and it worked before I changed the button position

More likely, the logic is affecting the whole page rather than your actual scroll view (we disabled the actual Page Layout scrolling, remember?). I’ll give it a try. If you find the solution first, do post that you have, please. I’m technically on a break right now from work, thus, limited time.

Yeah, just tested. That does appear to be the issue. I’m afraid that’s beyond my knowledge to determine a workaround. Perhaps, @Mevi or someone else on the team can provide some insight.

That’s it for me today.

k thanks for your help. Im just gonna stick everything from the top of the page on a sticky header so your help wasn’t for nothing (:

1 Like

Hi! Scroll to is only for scrolling the whole page (and if you have disabled scroll, it’s not possible to scroll). Another flow function would be needed to scroll the scroll view, but doesn’t exist at the moment. There are tracker issues related to the topic here and here.

As such, I don’t unfortunately know of a workaround to get the effect you want :confused:

1 Like

this worked! thanks for this!

2 Likes

In the newr version of AppGyver “Disable scroll” and “Stretch to viewport height” boxes cannot be found. How does this solution work in today’s version?

It is there…
Click on the grey space on the canvas or on the “Page layout” text in the layout tree.
Then navigate to the “Style” tab and open up the “advanced options”. And there you have it.

1 Like