I'm currently facing a dilemma regarding the arrangement of elements within the card. My goal is to have the items inside the "top-right-element" class positioned in the top right corner, while the button featuring the pi-chevron-up icon should be placed in the bottom left corner. Below is the provided HTML code:
<div class="customCard" >
<p-card>
<ng-template pTemplate="header"gt;
<p class="m-0">
{{item.id}}
</p>
<div class="top-right-element">
<table>
<td>
<div class="progressBar-toolbar" [style]="{'margin-right': '0.25em', 'margin-left': 'auto'}">
<p-progressBar [value]="progressValue" [showValue]="true" class="customProgress" ></p-progressBar>
</div>
</td>
<td *ngIf = "warnings > 0">
<i class="pi pi-exclamation-circle alert" [style]="{'margin-right': '1em'}"></i>
</td>
</table>
</div>
</ng-template>
{{expanded ? item.description : item.description.slice(0,10)}}
<ng-template pTemplate="footer">
<div class="input-container">
<p-button icon="pi pi-chevron-down" *ngIf="!expanded" class="bottom-right-button" (click)="toggleExpanded()" [style]="{'box-shadow':'none'}" ></p-button>
<p-button icon="pi pi-chevron-up" *ngIf="expanded" class="bottom-right-button" (click)="toggleExpanded()" [style]="{'box-shadow':'none'}"></p-button>
</div>
</ng-template>
</p-card>
</div>
Below showcases the corresponding CSS style:
.bottom-right-button {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px; /* Optional: Adjust as needed */
margin-right: 10px; /* Optional: Adjust as needed */
}
.top-right-element {
position: absolute;
top: 0;
right: 0;
margin-top: 10px; /* Optional: Adjust as needed */
margin-right: 20px; /* Optional: Adjust as needed */
}
.input-container {
position: relative;
//margin-left: auto;
}
.customCard {
margin-left: 0.25rem;
margin-right: 0.25rem;
background-color: #ffffff;
color: #696969;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
}
Initially, all elements are correctly positioned. However, after expanding and then collapsing the text of the card using the button, the entire card disappears. There seems to be an issue with the placement of elements. Any assistance or insights on how to resolve this would be greatly appreciated.