Question posted in 
i have a problem with the positioning of elements in the card. I would like that the elements inside the class "top-right-element" are placed in the top right corner while the button with the pi-chevron-up is placed in the bottom left corner. This is the html code.
<div class="customCard" >
<p-card>
<ng-template pTemplate="header">
<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>
This is the css:
.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);
}
The elements are positioned correctly at the beginning, but when I click the button to expand the text of the card and then close it, the entire card disappears. There are issues with the positioning of the elements. Can anyone help me?
2
Answers
How to place an HTML element anywhere in a container?
position: absolute rule is used to place an element specifically in a container. But there is a prerequisite that the parent element should have one of the rules, position: absolute, position: relative, or position: fixed.
In other words, the absolute child element positions itself to the least outer element with absolute, relative, or fixed position rule.
Example
Change the position rules and observe the child’s behaviors.
The person’s answer here is exactly what I came to answer with : Containers so I just added my own spin on it below.
I like to use containers with Bootstrap (check out the website it has a lot of great features and pre-built icons, etc.). Even if the container is empty, it helps to evenly balance content.