I'm just starting to explore primeng, and I encountered this html snippet:
<div class="main wheel">
<div class="wheel-part use">
<img src="./assets/images/svg/path-use.svg">
<span class="wheel-part-title">USE</span>
</div>
</div>
Accompanied by the following CSS:
.wheel {
height: 37.5vh;
width: 39vh;
text-align: center;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #008800;
}
.wheel .use {
position: absolute;
top: 20px;
right: 0;
background-color: red;
}
Initially, the output looked like this:
https://i.sstatic.net/42mHN.png
My issue arose when I added a p-selectButton element to the HTML, causing the positioning to no longer work as expected.
The updated HTML code with the p-selectButton:
<div class="main wheel">
<p-selectButton [options]="wheelParts" multiple="multiple" > ;
<ng-template let-wheelPart let-i="index" pTemplate="item">
<div class="wheel-part use">
<img src="./assets/images/svg/path-use.svg">
<span class="wheel-part-title">USE</span>
</div>
</ng-template>
</p-selectButton>
</div>
Resulting layout after introducing p-selectButton:
https://i.sstatic.net/o7k7a.png
For more details, check out the StackBlitz