How to get container to display at bottom of screen.

Hi,

I would like to have a screen with the following layout

  • Container 1
  • Container 2
  • Bottom bar

How do I get container 2 to display it's contents at the bottom of the screen just above the bottom bar.

Thanks

Please check the screens and do the CSS for the bottom container

Hello Mark, 

Usually the Web screens have a layout, that is a Web block with placeholders. If it is OS11, it has a Footer placeholder you can use. 

If you wan it to be fixed, you can apply CSS to it. 

Cheers

Solution

In addition to what Eduardo wrote, there is already a post with answered marked as solution regarding your request

https://www.outsystems.com/forums/discussion/45428/floating-footer/

The first CSS example in the response marked as solution should work for you.

Solution

Thanks guys.

Unfortunately I am unable to use the bottom bar to display the content as it is required only on one screen.

However, as advised I used the following to position the container to the bottom.

.Footer {   
  width: 100%;
  position:absolute
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100px
    
}



Hi Mark,

Here are two alternative solutions:

  • Use a specific class name and use it on your footer in your screen
  • Place the CSS not in your application CSS style sheet, but in your screen CSS style scheet.

Regards,

Daniel