1

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

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Kodak
  • 1,779
  • 2
  • 18
  • 29
  • Do you want your `tabPanel` to take the whole available height? – Antikhippe Sep 18 '20 at 05:59
  • yes; I have done that already by changing p-tabView display from block to flex and making height 100%; but then tab headers are positioned incorrectly; adding flex-direction: column to p-tabView helped - now I need to make p-tree growing to fill the space – Kodak Sep 18 '20 at 06:02
  • why setting a style within app.component.css for .p-tabview {display: flex} is not effective? – Kodak Sep 18 '20 at 06:19
  • Try with `:host ::ng-deep .p-tabview {display: flex}` – Antikhippe Sep 18 '20 at 06:20
  • 1
    thx; now I know about angular styles isolation... – Kodak Sep 18 '20 at 06:26

1 Answers1

1

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;
}
Antikhippe
  • 6,316
  • 2
  • 28
  • 43