cssflexboxprimengprimeng-treeprimeflex

Primeflex + PrimeNG tab + PrimeNG tree - unable to make tabPanel grow

Could someone help me with the layout of those PrimeNG components?

I would like to have a tree taking the whole vertical space (minus buttonset at the bottom), scrolling if needed. Tree is being places inside a tab panel.

Thanks in advance

https://stackblitz.com/edit/angular-np8of7?file=src/app/app.component.html

Solution

  • Either you can add this kind of CSS

    .p-tree {
  height: calc(100vh - 300px);
  overflow: auto;
}

    but in order to apply it, you have to declare encapsulation: ViewEncapsulation.None in your component definition. See StackBlitz.

    Either you just add in your CSS:

    :host ::ng-deep .p-tree {
  height: calc(100vh - 300px);
  overflow: auto;
}