PrimeNG - new p-splitter component with p-tree not filling up space

Viewed 414

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>
0 Answers
Related