Best way to position button or any component at bottom

What is the best way to fix a button (or any component) so that it always appears at the bottom of any screen 1 pixel above the bottom Nav Bar?

1 Like

Hi John, check out this tutorial for instructions on how to create a sticky element on the screen. Basically you switch the container’s position to absolute under Advanced and edit its positioning relative to the bottom of the screen under Dimension and Position. Remember to also set the page’s styles to fill the viewport height.

3 Likes

Are there any instructions for this that use the new theme editor? The “Dimensions and Positions” dialogue does not exist anymore? I am brand new to AppGyver so I have never seen the old theme editor. Can I revert back to the old theme editor?

I figured it out.
This is based on a brand new page with no background:

  1. One the page properties, click the “Style” tab and open the “Advanced” section and turn on “stretch to viewport height”
  2. Then drag a container onto the screen and add a button or whatever you want
  3. Select the container and click the “Layout” tab and open the “Position” section. Choose “Absolute” from the dropdown then use the “four-quadrants” widget under the dropdown and enter “0px” for the bottom option.

This will place the container at the bottom of the screen.

If you want the container to be the full width of the screen add these steps:

  1. Using the same “four-quadrants” widget in the “position” section add 0px to the left option and this will make the component move to the left edge
  2. Now open the “width and height” section and choose “Custom”. In the Min Width / Max Width section, choose “Set Width” then click on the “-” sign underneath it.
  3. When the dialogue window appears, click the “lightning bolt” to add a formula and click on the formula input to open the formula dialogue.
  4. Select “System Variables” from the list and look for “systemVars.dimensions.viewport.width” click the "Enter + " beside it and then click “Submit”
    Your container should now be the full width of your viewport and be floating on the bottom.

The only last this would be to set the Z-Index to like 2. This should allow content to scroll under it (But I have not tested it yet)

This works for me on the web view and on my iPhone 12. I have not tried this on any other device.
NOTE: This method does not seem to work well if you have the built-in navigation turned on.
I hope this solution works for you too

2 Likes

Hello Ken,

thank you for your effort. I guess it took a while. In my case it’s not working. When I enable “stretch to viewpoint” my screen is not scrolling even when the checkbox “disable scrolling” is not checked. Anyone with the same issues?Or even better with a solution?

Best regards Lukas

Hi! That sounds like a potential bug, please make a bug report at our bug tracker so we could get it sorted out!

in case helpful for folks, I get the same issue above, but worked around it by disabling scrolling on the page and adding a scrollview for the list. You can adjust the scrollview height (e.g. 85%) to not overlap the navigation/button.