inner panel height not 100% on overflow - html

Question

I have a panel with components inside and once the submit button is pressed, an overlay appears, but is not covering the entire parent panel (see picture) when I have scrolled all the way to the bottom. Also, the spinner need to be always in the center whether I am scrolling or not. I used position: fixed; but I don't know if that's the best practice.
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>

Answer 1

I don't think that there is anything wrong with using position:fixed to keep your spinner in the center of the page.
Also, if you want to fully overlay your content then your loading-container needs to be at the very bottom of the content you want overlayed. This code below should just overlay pay-storage-container:
<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>
<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 class="loading-container" *ngIf="isLoading">
<img src="assets/spinner.svg" alt="">
</div>
</div>

Answer 2

I am sharing a sample code snippet which centers overlay spinner for all dimensions. You can edit your CSS accordingly to achieve centered spinner with overlay.
/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
#-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loading">Loading…</div>
`