I have a problem with the Picklist. I gave each row a title and a button to see more information.
I want to have a configuration menu that opens when the button is clicked, but the button only works when I open the developer view on chrome and emulate a mobile device.
Can someone tell me what is wrong with my code or how I can fix this?
Thanks in Advance and here are some more information:
A video, where you cannot see my mouse, but I think it became clear that I am trying to click the button but it only works on mobile for some reason.
https://www.transfernow.net/dl/20221130MHsDt156
The HTML-Code:
Code: Select all
<p-pickList [source]="availableApps" [target]="selectedApps"
[responsive]="true" filterBy="name" [dragdrop]="true"
sourceHeader="Available Apps" targetHeader="Selected Apps"
[showSourceControls]="false" [showTargetControls]="false"
sourceFilterPlaceholder="Search" targetFilterPlaceholder="Search"
[sourceStyle]="{'height':'20rem'}" [targetStyle]="{'height':'20rem'}">
<ng-template let-app pTemplate="item">
<div id="container">
<p-avatar id="left" label="{{app.name?.charAt(0)}}"></p-avatar>
<b id="middle">{{app.name}} ({{app.selectedVersion}}|{{app.selectedSchema}})</b>
<button pButton (click)="openNew(app)" icon="pi pi-info-circle"></button>
</div>
</ng-template>
</p-pickList>
Code: Select all
::ng-deep .p-picklist-buttons > button:nth-child(2),
::ng-deep .p-picklist-buttons > button:nth-child(4) {
display: none;
}
#container {
height: 100%;
width: 100%;
}
https://github.com/primefaces/primeng/issues/9678