Trying to implement a flexbox layout with the following elements:
<application>
<flex-container>
<page-content>
<template-content>
</template-content>
</page-content>
</flex-container>
</application>
This is the structure I aim for.
To replicate this in my app.component.ts, I have created the following layout:
<div class="application-body">
<header></header>
<div class="flex-container">
<img class="background" src="assets/background.png" />
<ion-app>
<ion-router-outlet
(ionNavWillChange)="playFadeInOutAnimation($event.target)"
></ion-router-outlet>
</ion-app>
<ng-toast></ng-toast>
</div>
<footer></footer>
</div>
app.component.css styles:
.background {
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-position: center;
background-size: 0%;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
/* More CSS styles here */
login-page.component.html content:
<div class="page-content">
<!-- Login Page Content Here -->
</div>
login-template.component.html content:
<div class="template-container">
<!-- Login Template Content Here -->
</div>
Finally, global styles defined in styles.css:
/* Global Styles for Flex Container and Page Content */
The issue faced is the page-content extends beyond the limits of flex-container, causing visibility problems with content starting behind the header. Any assistance on resolving this would be greatly appreciated as I struggle with CSS implementation.