When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried using position: fixed; but unsure if it's the best approach.
CSS
.pay-storage-container {
$inner-padding: 16px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 325px;
z-index: 2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
background-color: #fff;
.loading-container {
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
img {
position: fixed;
top: 50%;
right: 18%;
animation: spinner 1s linear infinite;
}
}
}
HTML
<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
<div class="header-container">
<div class="header">Pay Storage</div>
<span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
</div>
<div class="pay-storage-inner">
<app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
<app-credit-card #creditCardForm></app-credit-card>
<div class="loading-container" *ngIf="isLoading">
<img src="assets/spinner.svg" alt="">
</div>
</div>
<div class="footer-container">
<!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
(click)="onSubmitPayment()"></button> -->
<button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
</div>
<div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
<app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
</div>
</div>