search

CirclonGroup / angular-tree-component

A simple yet powerful tree component for Angular (>=2)
https://angular2-tree.readme.io/docs
MIT License
1.1k stars 492 forks source link

Tree does not scroll horizontally to show new nested nodes #786

Closed Davechpn closed 4 years ago

Davechpn commented 4 years ago

the tree width is 300px and thats the same witdh for each node. At node expansion I am supposed to scroll a bit to the right and view my nested nodes in full but unfortunately the tree cant cant scroll to the right

adamkleingit commented 4 years ago

Hi, please add a link to stackblitz / codesandbox / git repo to reproduce. Thanks

junxie6 commented 4 years ago

I encountered the same issue. This is how I solved it:

$ vim app.component.html

<div class="tree-wrapper">
  <tree-root [focused]="true" [nodes]="nodes"></tree-root>
</div>

$ vim styles.scss

@import '~angular-tree-component/dist/angular-tree-component.css';

.tree-wrapper {
  width: 160px;
  height: 360px;
  overflow-x: auto;
  border: 1px solid red;
}

.tree-children {
  overflow: visible;
}

tree-node-content > span {
  white-space: nowrap;
}

Demo on StackBlitz: https://angular-wmedqh.stackblitz.io

Edit on StackBlitz: https://stackblitz.com/edit/angular-wmedqh?file=src%2Fstyles.css