UI Issue on Footer Details overlap with page data

0
Hi All,Facing UI issue with footer details getting overlapped with page date, when page has data like 20 records.Footer details are maintained in Layout. Placed the layout grid with Footer info at the bottom of 'Main' placeholder of Layout, maintaining container in between Main placeholder and Footer Details. But still footer details getting overlapped with page data. Please help me how to fix this UI issueRegards,Cyril
asked
2 answers
0

Hi Cyril


This is a very common Mendix layout/CSS issue. The footer overlaps because the main content area isn't pushing the footer down when content grows.


There are various way to fix this I can give one by one pick which suite you more


Option 1 — Use Flexbox on the Layout (Best Solution)

On your Layout's outer container, set these CSS classes or custom styles:


css

display: flex;
flex-direction: column;
min-height: 100vh;

Then on the Main placeholder container (the one wrapping your page content):


css

flex: 1;

This makes the main content stretch and push the footer to the bottom naturally regardless of how much data is on the page.


Option 2: Avoid Fixed Positioning on Footer

Check if your footer container has any of these in its class or inline style:



css

position: fixed;
position: absolute;
bottom: 0;

If yes — remove it. Fixed/absolute positioning takes the footer out of the document flow, causing overlap.


Option 3:Add Bottom Padding to Main Placeholder

Quick workaround — add a bottom padding to your main content container equal to the height of your footer:



css

padding-bottom: 80px; /* match your footer height */


I hope this helps

answered
0

Hi,


This issue typically happens when the footer is styled as fixed or absolute, causing it to overlap page content instead of flowing naturally.

Recommended fix (Atlas-compliant):

  1. Avoid fixed positioning for footer
  2. Check your layout/footer container CSS. If you have:

position: fixed;
bottom: 0;

remove it. This is the main cause of overlap.

  1. Use proper layout structure (flex-based layout)
  2. Ensure your page layout follows a vertical structure:
  • Header
  • Main content (flex-grow)
  • Footer

Apply a class to the layout root:


.page-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1;
}

Assign:

  • page-layout → main layout container
  • page-content → Main placeholder container

This pushes the footer to the bottom without overlap.

  1. Handle scroll correctly
  2. If your page has large data (like 20+ rows), ensure:
  • No overflow: hidden on parent containers
  • Use overflow-y: auto only where needed
  1. Quick fallback (if needed)
  2. Add bottom spacing to content:

padding-bottom: 80px;

(based on footer height)


The issue is caused by incorrect positioning of the footer. Switching to a flex-based layout ensures the footer stays at the bottom without overlapping content, regardless of data size.


answered