Creating a Sticky Button

[Joe_Gabriele]

Looking to see if anybody knows some HTML and Inline CSS to create a button component that is sticky to the bottom of a screen using Pages?

I believe Rich Text components can have actions still tied to them in Pages, correct?

[ThinhDinh]

@Joe_Gabriele

I believe Rich Text components can have actions still tied to them in Pages, correct?

Yes.

I have played around a bit with -webkit-sticky and sticky but haven’t had any luck.

[Joe_Gabriele]

I found this to work:

style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%);

However, when I apply it to a button type, it doesnt treat it like a button and doesnt apply any of the inline styling. Very strange…

<button style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%);">Hello</button>

Only got it to work using an image of a submit button using:

<img src="https://freepngimg.com/thumb/categories/1428.png" style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); padding: 10px;"/>

[Joe_Gabriele]

Actually found out a way:

<a style="padding-top: 15px; 
padding-bottom: 15px; 
padding-left: 40px; 
padding-right: 40px;
text-decoration: none; 
justify-content: center; 
border-radius: .5rem; 
border-width: 0px; 
background-color: #817CFC; 
font-size: 1rem; 
color: #FFF; 
line-height: 18px; 
margin-top: 20px; 
margin-bottom: 50px; 
width: 90%; 
text-shadow: none; 
font-weight: 600; 
flex-direction: row-reverse; 
box-shadow: none; 
align-items: center; 
text-align: center; 
position: fixed; 
bottom: 0px; 
left: 50%; 
transform: translateX(-50%);">
Submit</a>

Only really works well on Mobile View, but in my use case it should only be used on Mobile.

[Uzo]

Your solution is just a ilusion, it wont work on different screen resolutions, use pisition fixed 90vh top, and other elements with the scroll y overflow… But mine solution, wil not work on iphones… So you have to write many variants depending on system navigator

[Joe_Gabriele]

Yes thats correct, this is only for mobile and works on iPhones. Not sure if it works on Android. For my usecase, I will only have Mobile users so it fits for now.

I did use Google Chrome’s Dev Tools to test using a Samsung Galaxy and appears the buttons stayed sticky. Also there is no Y axis scrolling involved on mobile.

[Uzo]

I hope glide will give us fixed containers for pages… If they really wanna make pages better then apps lol