Resizable View

[mikeshugar]

Hi, I m new to Angular and PrimeNG.

I am trying to build a UI with manually resizable panels. Kind of like your browser has a bookmark panel that can be resized to be wider or narrower.

I want:

• a top row panel that has fixed height and sticks to the top of the view port.
• a bottom row panel that has fixed height and sticks to the bottom of the view port
• a middle row content panel that has variable height and dynamically consumes 100% of the remaining viewport after the top and bottom have been drawn
  • the middle row content has two columns (a left and right) and the divider between them can be dragged to resize both columns.
  • if either of the middle row content panels needs more height, vertical scrollbars appear inside them as needed.

I have not figured out how to get the bottom row to stick to the bottom of the view port. The page just flows until it ends.

I have not figured out how to have a resizable view panel in PrimeNG.

If anyone can answer these questions or provide a complete sample, that would be great.


Thanks.

[mikeshugar]

I ended up using this:

https://bertrandg.github.io/angular-split/#/

It works. It was pretty easy.

But its a little rough around the edges. If anyone has better ideas, would love to see them.