Please find the code for my component below:
In this component, I have a p-splitter that is divided into 3 sections. Each section contains a p-accordion, which in turn includes a p-table.
<div class="card w-full">
<p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5">
<ng-template pTemplate>
<p-accordion [activeIndex]="0" styleClass="h-full">
<p-accordionTab header="Signed PDF Documents">
<div class="flex justify-content-between">
<div>
<h6>Proposal PDF Documents</h6>
</div>
<div><a>Add Attachment(s)</a></div>
</div>
<ng-template pTemplate>
<p-table [value]="documentList" styleClass="p-3 p-datatable-striped">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="name">Attachment Name
<p-sortIcon field="name"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-doc>
<tr>
<td><a>{{ doc.name }}</a></td>
</tr>
</ng-template>
</p-table>
</ng-template>
</p-accordionTab>
</p-accordion>
</ng-template>
...
I am facing two specific challenges:
- How can I ensure all accordion sections are of the same size, regardless of content? Currently, each accordion grows based on its content, but I want them to be uniform in size (the largest size among the three).
- Is there a way to prevent the splitter from being resized by the user? Currently, users can resize the splitter, but I would like to restrict this functionality. How can I achieve this?
I appreciate any assistance or guidance provided!
Warm regards,
Nitin Avula.