Easy footer (sticky and all)

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 :smiley:


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