Here is an easy solution to turn a component into footer:
First, add this to your .css file or in the native libraries in a tag:
.anvil-role-footer {
position: fixed;
left: 50%; /* Center horizontally */
bottom: 0px; /* 50px above the bottom of the screen */
transform: translateX(-50%); /* This is needed to truly center the item */
width: 100%;
padding-top:35px; /* Change padding and other decorations as you wish */
}
Add “footer” to your roles. And apply it on any component to make it stick down there 
10 Likes
Hi Arashmh,
Nice solution but I do not know how to add “footer” to my roles. For example, I want to be able to place a ColumnPanel and the bottom of the screen. How should I do this?
Thanks for your help.
Ah, found it. Just for the sake of completeness. It can be found in the App Theme section.
1 Like
Unfortunately, this solution does not work very well using the Material Design 3 template. When resizing the window to smaller size, or when opening the app in a mobile browser, the component in the footer section disappears.
Can you maybe share a link to a clown of ur issue?
What I trying to achieve is the following: aligning the columnpanel to the bottom. But the left bar of the material 3 design template is sitting ‘in between’.
Here is a clone: Anvil | Login
1 Like
