The new p-splitter from PrimeNG does not seem to work with the p-tree component.
Expected behavior:
When 2 panels are created side by side with a splitter, by using the p-splitter component, the p-tree component on the left side of the page should fill 100% of the space given by the p-splitter on that side.
Actual behavior:
The p-tree is padded and does not fill 100% of the space.
In this case, app-searchbar, app-filter, app-tree (p-tree), and app-details are all Angular components.
Code:
<router-outlet></router-outlet>
<p-splitter [style]="{'height': 'auto'}">
<ng-template pTemplate>
<p-panel>
<p-header>
<app-searchbar></app-searchbar>
<app-filter></app-filter>
</p-header>
<app-tree></app-tree>
</p-panel>
</ng-template>
<ng-template pTemplate>
<p-header>
</p-header>
<app-details></app-details>
</ng-template>
</p-splitter>
But this can be generalised to:
<p-splitter [style]="{'height': 'auto'}">
<ng-template pTemplate>
<p-panel>
<p-tree></p-tree>
</p-panel>
</ng-template>
<ng-template pTemplate>
Right hand side
</ng-template>
</p-splitter>