Footer Positioning Problem

  

Hi Friends,

I have LisbonTheme\Layout_Lisbon for web application and I am facing footer position problems while accessing the same page using different resolution screens. Please look at the following screenshots:


  

The above screen resolution is 1280*720.



The above screen as viewed on resolution 1920*1080.


I have used the following css:

text-align: center;
    background-color: #b02a30;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1 rem;
    text-align: center;
    font-size: 15px;
    color: white;
    position: absolute;
    width: 100%;
    height: 40px;

Currently your footer is setup to be stuck to an absolute position on screen (based on the screen initial load).

I'm not sure if you want a floating (fixed) footer, or to just have it below the show quote button?

For the first changing the position:absolute to position:fixed might already fix your problem.
If it's the latter, you might want to remove all the positioning (position and left, right, bottom). and just leave the footer (webblock or container) as the last element in your web screen.

Hi Joey,


As told by you I did the changes to the css please find the css and screenshots below:

text-align: center;
    background-color: #b02a30;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1 rem;
    text-align: center;
    font-size: 15px;
    color: white;
    position: fixed;
    width: 100%;
    height: 40px;


2)

.desktop .Footer
{
    text-align: center;
    background-color: #b02a30;
    padding: 1 rem;
    text-align: center;
    font-size: 15px;
    color: white;
    position: absolute;
    width: 100%;
    height: 40px;
}


The first one is doing exactly what I expected, you might want to add some extra padding or margin on the show quote button for some extra spacing.

For the second one, you forgot to remove the position:absolute;

Hi Joey,


I tried everything but then also same problem so I had to delete the footer for desktop version. Thanks for your help.


Regards,

Manthan Shah.

Hi Manthan,

As per Joey's suggestion, it should work as expected.
Might be there are some CSS which are been overridden.

If you are still planning to achieve the same then share your OML or link to the page, we will solve that.

I think there is no need to remove it for desktop version when you are unable to solve it. (Its not the correct way to solve problem quickly)
Our community is only for helping each other.

Regards,
Palak Patel

Hi Palak,


Yes I am still planning to achieve the same please have a look at the below page:

https://devsoftware-dev.outsystemsenterprise.com/IPRUHealthCalculator/


Regards,

Manthan Shah.

I'm not sure what your goal is, but as I said before, fixed will set it fixed to the bottom of your screen (and make it stay there even if you scroll), absolute will set it to the initial screen position and relative will position it relative to it's parent.

If you don't use any positioning:

text-align: center;
background-color: #b02a30;
left: 0;
bottom: 0;
right: 0;
padding: 1 rem;
text-align: center;
font-size: 15px;
color: white;
width: 100%;
height: 40px;
position: absolute;

It will be placed underneath your previous element.

You could also use position: sticky instead, this means that the element will stick on screen whenever you are scrolling past it (mix between relative and fixed I guess).

Hi Manthan,

Add following CSS to your page.

.buttonContainer {
    position: fixed;
    bottom: 50px;
    text-align: center !important;
    width: 100%;
}

.Footer{
    position: fixed !important;
}

Explanation
Your footer and buttonContainer both are now with position fixed. footer height is 40px and I have make buttonContainer as 50px above from bottom. So we will have 10px margin between both of them everytime.

Note: 
Please add your desktop class for these CSS as I have seen for mobile its working fine. It should not override mobile version. 

Result:


Also you can add 'buttonContainer' inside your BasicDetails as currently its outside your scrollable details area. It should be inside the details. 

Please try with different resolutions and let me know if its not working or causing any other issues.
I will be happy to help.

Cheers
Palak Patel

Hi Palak Patel,


I tried your solution please look at the result below:


For 1280 * 720 screen:



For 1920* 1080 Screen:


 


Please help me.


Regards,

Manthan Shah.

Hi Manthan,

Isn't that required?

What issues now you are facing and in which resolution?

What changes should I do?


Regards,

Palak Patel

Hi Palak,


I did the changes as you told but I am facing the issue with different resolutions.

As seen in 1280 * 720 the button remains on the up side where edit box is there so it mixes with dob editbox. But when I go in 1080 * 1280 the button doesnot mix with dob editbox.

Regards,

Manthan Shah.


Joey Moree wrote:

I'm not sure what your goal is, but as I said before, fixed will set it fixed to the bottom of your screen (and make it stay there even if you scroll), absolute will set it to the initial screen position and relative will position it relative to it's parent.

Joey, may I say it differently?

About CSS positioning:

1. STATIC. The element will be positioned based on the HTML structure flow.

2. RELATIVE. You may change the position of an element RELATIVELY to its ORIGINAL (static) position (not its parent).

3. ABSOLUTE. You may position your element RELATIVELY to the FIRST parent (in the flow) that has ALSO a position defined (Absolute, Fixed or Relative)

4. FIXED. You will position your element relative to the viewport.

Cheers.


Manthan,

May I ask WHY did you placed the button FIXED in the SCREEN?

Shouldn't the button be just bellow your input or something like that?

The Lisbon layout has a MainContent placeholder. Your button should be just below the content, in the Main Content area, WITHOUT any "fixed" positioning on it. 

This way, your button will always be positioned AFTER the content and will never go "over" the content...

EDIT: Regarding the footer itself (the webblock), unless you want it to appear all the time, you should just place it in the Footer placeholder of the page and do not mess with its positioning.

Cheers.


Eduardo Jauch wrote:

Manthan,

May I ask WHY did you placed the button FIXED in the SCREEN?

Shouldn't the button be just bellow your input or something like that?

The Lisbon layout has a MainContent placeholder. Your button should be just below the content, in the Main Content area, WITHOUT any "fixed" positioning on it. 

This way, your button will always be positioned AFTER the content and will never go "over" the content...

EDIT: Regarding the footer itself (the webblock), unless you want it to appear all the time, you should just place it in the Footer placeholder of the page and do not mess with its positioning.

Cheers.


Hi Eduardo,


As you suggested I did not mess with footer positioning. But the footer is seen as below:




But when I say fixed position I see the following output :




But In different resolution it I see the following output:



and when I scroll down:




So the problem with and without fixed positioning of footer is given above please help me resolve this.


Regards,

Manthan Shah.

I can help you, but first I need to understand what do you expect to get as final result?

1. What do you need to happens with the FOOTER? Do you want the FOOTER to appear all the time (fixed to the screen) or do you want to the FOOTER do appear always BELLOW the content?

2. You mentioned you are using the Lisbon template. What is the LAYOUT of this screen, and in which placeholder are you putting the FOOTER?

3. What is the version you're using? 10 or 11?

Cheers.

Eduardo Jauch wrote:

I can help you, but first I need to understand what do you expect to get as final result?

1. What do you need to happens with the FOOTER? Do you want the FOOTER to appear all the time (fixed to the screen) or do you want to the FOOTER do appear always BELLOW the content?

2. You mentioned you are using the Lisbon template. What is the LAYOUT of this screen, and in which placeholder are you putting the FOOTER?

3. What is the version you're using? 10 or 11?

Cheers.

Hi Eduardo,

Please accept my answer given below:


1) FOOTER should be place BELOW the content but at the end of the page.


2) FOOTER is in the placeholder FOOTER. I did not understand LAYOUT. Please elaborate.


3) Outsystems 11 I am using.


Hope I was able to give you all answers of the questions you asked.

Regards,

Manthan Shah.


Hi,

I suggest you should watch some basic CSS tutorials about positions, because what you are asking is not rocket science.

Normally it would be positioned relative so it gets rendered as you would expect.

see this example, no positons explicitly applied

https://codepen.io/anon/pen/XxYzGj


EDIT: Probably this is not necessary. See next answer.


Hello Manthan,

A layout is a web block used in a page, that has placeholders to put specific content, like Heade, Menu, Footer, etc. The Layout comes from the Theme, and has JavaScript associated with it that allows many widgets (SilkUI) to work. A layout is not necessary, but usually a page has it, like here:

If you clone the module with the layout, you will see this:

As you can see, the Footer placeholder is not at the same level than the MainContent.
The only way I found (in inspector), to do what you want, is to have the Footer at the same level the MainContent, inside the Content, and apply a small CSS to Content and Footer. The problem is that you have to create a new layout web block to make the change and use it instead of the traditional:

Notice that the I moved the placeholder Footer to inside the Div Content, in the layout.

Here is the CSS I Used:

SyntaxEditor Code Snippet

.Content {
    position: relative;
    min-height: 100%;
}

.Footer {
    position: absolute;
    bottom: 0;
}

This does what you want. If the content does not fill the page, the footer is at the bottom. If it fills and overflow the page, the footer moves to be below the content (and only visible when you scrool the page). 

Cheers.


It seems I fount an easier way.

Try this:

Apply this CSS to your application:


.Content {
    position: relative;
    min-height: 100%;
}

.Footer {
    position: absolute;
    bottom: 0;
}


And put your footer web block inside a DIV with the Footer class applyed at the bottom of the MainContent. As MainContent is not positioned, this probably will work without needing to change the layout.

Cheers. 



Solution

Hi Eduardo Jauch,


My problem with the page is solved. I had given a div on the above of all the main content which had a height assigned to it. That was causing the problem. But thanks for your help.


Regards,

Manthan Shah.

Solution