1684
Views
5
Comments
Solved
How to get container to display at bottom of screen.
Question

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

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP
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.

2024-05-03 14-03-28
Sudip Dey

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

2020-02-28 09-46-54
Eduardo Jauch

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

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP
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.

UserImage.jpg
Mark Broughton

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
    
}



2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.