PrimeNG p-tree Horizontal Scrollbar hidden until I scroll down to the bottom of the div

Question

This is a copy/paste from the PrimeNG forums where I haven't been "approved" to ask the question yet, so I figured I'd give SO a shot.

I searched everywhere and I'm surprised to learn it seems like I'm the only person to come across this issue. There was a suggestion in another SO post about the PrimeNG DataTable to use [scrollable] properties, but scrollable is not a property of p-tree.

Anyway, my issue. I've got a p-tree component with a large list of hierarchical objects. When I expand them to the point where the vertical scrollbar is shown, everything is fine. However, when I expand some more nodes so the overflow goes to the right, the horizontal scroll bar is hidden. It's only until I scroll all the way down to the bottom of the tree that I am able to see the horizontal scrollbar. I've tried all sorts of CSS mods and played with the ui-tree div with inspect, but I can't find anything that seems to work.

2 Notes: Changing overflow: auto to overflow: visible just eliminates the vertical scrollbar entirely and the content goes south to oblivion, off the visible page. Changing overflow to scroll creates a horizontal scrollbar, but it's just an empty bar and I need to scroll down to see the actual scrollbar.

Here is my ui-tree CSS:

:host ::ng-deep .ui-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding-right: 5px;
  width: 22em;
  max-height: 75vh;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

I'm using the latest PrimeNG with PrimeIcons as of April 1st with Angular 9. Unfortunately I can't post my code and/or HTML due to propriety issues, but if no one has a solution I could create a fiddle/stackblitz/plunkr, but that will take some time, but I will do it if necessary.

Please see this paint example for a visual of what I'm experiencing. In a nutshell, the horizontal scrollbar is hidden until I scroll all the way down and I need it visible and functioning regardless of the position of the vertical scrollbar.

Any help or suggestions is greatly appreciated!

Thanks.

Melosz Melosz · Accepted Answer · 2020-04-20T20:36:50

Solved my own issue, though it feels a bit messy and hackish. Leaving this here in case anyone else encounters this issue or has a more elegant way to solve it without a bunch of :host and ::ng-deep since they are going away at some point in the future.

I ended up having to create additional CSS rules for the following:

:host ::ng-deep .ui-tree {
  border: 1px solid #adabab;
  border-radius: 0px 5px 5px 0px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #eaeaea;
  padding: 0em 0em;
  padding-right: 5px;
  width: 22em; /* This constrains the width and creates the horizontal scrollbar when a p-tree node is expanded past this width. */
  line-height: 15px !important;
  max-height: 75vh;
  overflow: overlay; /* Changed from auto to overlay */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* This creates the horizontal scrollbar visible on top of the inner divs */
:host ::ng-deep .ui-tree .ui-tree-container {
  overflow: initial;
}

/* This keeps a margin between horizontal overflow and the vertical scrollbar. Without it content would be hidden behind the scrollbar */
:host ::ng-deep .ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
  margin-right: 10px;
}

PrimeNG p-tree Horizontal Scrollbar hidden until I scroll down to the bottom of the div

1 Answers