How can I make the bottom-region (footer of a page not fixed) but the region-topbar does

0
Hi folks,  Please help me , I want to make the topbar scroll along with scroll container, but not with the footer. I choose Per Region behavior scroll. How can I use css to achieve that. I have tried a lot of css solutions but it is not working. I want it just like the dock-footer of mendix comunity page. Thanks in advanced.
asked
2 answers
2

1- First, double click the scroll container in the layout and change the scroll behavior to "Full width"

 

image.png

 

2 - Add the content of the header inside a container and give it a class name let's say "top-container"

 

image.png

 

3- inside your "main.scss" add this styling for the container (use any suitable value for the z-index):

 

.top-container {

    position: fixed;

    z-index: 10000;

    width: 100%;

}

 

// This staying to solve the overlapping that happens after the header gets fixed (use your header height)

.mx-scrollcontainer-top {

        height: /*Your header height*/;

}

 

hope that was useful. 

answered
1

To let the footer always be at the bottom even when the page does not have any data, follow these steps:

 

1- give the scroll container in your layout a class name, let's say "scroll-container-height"

image.png

 

2- in your "main.scss" file add these styles, it includes the styles from the previous answer, all in one class. (make sure to set your header height):

 

.scroll-container-height {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

 

    .mx-scrollcontainer-top {

        height: /*Your header height*/;

 

        .top-container  {

            position: fixed;

            z-index: 10000;

            width: 100%;

        }

    }

 

    .mx-scrollcontainer-middle {

        flex-grow: 1;

 

        .mx-scrollcontainer-wrapper {

            min-height: unset !important;

        }

    }

}

answered