Im trying to create a layout with flexbox, that have this elements:
<application><flex-container><page-content><template-content></template-content></page-content></flex-container></application>basically, its the struct that i want.
To reproduce this in my app.component.ts i created this 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:
.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; } .application-body { margin: 0; padding: 0; height: 100%; } header { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 64px; background: linear-gradient(to right, #e03434, #dc6869); color: #fff; padding: 20px; width: 100%; } footer { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 64px; background: linear-gradient(to right, #e03434, #dc6869); color: #fff; padding: 20px; width: 100%; } ion-title { color: var(--ion-color-text); font-size: 1.5rem; font-weight: bold; } @media only screen and (min-width: 768px) { ion-title { font-size: 2rem; } }login-page.component.html:
<div class="page-content"><imcl-scheduling-login-template (clickLogin)="autenticationProcess($event)" (clickSignup)="navigateToSignupPage($event)"></imcl-scheduling-login-template></div>login-template.component.html:
<div class="template-container"><div class="left-content"><ion-img class="logo" src="assets/imcl-logo.svg"></ion-img></div><div class="right-content"><div class="title-container"><ion-text color="primary"><h2 class="title">Acesse agora!</h2></ion-text></div><form [formGroup]="form" (keyup.enter)="submit()"><ion-item><ion-input formControlName="username" label="Email" labelPlacement="floating" type="text" placeholder="email@example.com"></ion-input></ion-item><ion-item><ion-input formControlName="password" label="Senha" labelPlacement="floating" type="{{ showPassword ? 'text' : 'password' }}" placeholder="*******"></ion-input><ion-icon name="{{ showPassword ? 'eye-off' : 'eye' }}" slot="end" (click)="togglePassword()"></ion-icon></ion-item><br /><br /><div class="button-container"><ion-button color="primary" (click)="loginHandler()">Acessar agora</ion-button><ion-button color="secondary" (click)="signupHandler()">Criar conta</ion-button></div></form></div></div>and finally, the global styles (styles.css):
.flex-container { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background-color: white; border: solid 8px blue; align-items: center; } .page-content { flex: 1; overflow-y: auto; border: solid 4px purple; } .page-content.no-overflow { overflow-y: hidden; } .template-container { display: flex; flex-direction: row; max-height: 100%; /* Define a largura máxima do template */ min-height: calc(100% + 64px); /* Define a largura máxima do template */ justify-content: center; /* Centraliza o conteúdo horizontalmente */ align-items: center; /* Centraliza o conteúdo verticalmente */ } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; flex-direction: column; width: 50%; } .title { font-size: 32px; } .title-container { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .page-content { align-items: center; } .template-container { flex-direction: column; padding: 32px; margin: 0; } .left-content, .right-content { width: 100%; } } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; flex-direction: column; width: 50%; } .left-content { align-items: flex-end; } .right-content { align-items: flex-start; } .button-container { display: flex; justify-content: center; } .bottom-button { position: absolute; bottom: 0; width: 100%; padding: 16px 0; }The problem is the page-content is growing more than of the flex-container, causing some problems to visualize it. The content of page starts behind of header.
Any one can helps with that? Im really bad with css.