Primeng: Bugs with Horizontal Tree Component

[Hesesses]

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Minimal reproduction of the problem with instructions
```

1

2

3 ```

1 Displays only the first node (Pictures and Movies missing)

2 When adding drag & drop attrs, there are few ui-bugs and drag and dropping doesnt work

3 Everything works as expected when not using the layout="horizontal"

files: TreeNode[];
constructor() { }

ngOnInit() {
this.files = [
{
"label": "Documents",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
},
{
"label": "Home",
"data": "Home Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [
{"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"},
{"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"},
{"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}]
},
{
"label": "Movies",
"data": "Movies Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}]
}]
}
]
}

• Angular version: 2.0.X
  v4

• PrimeNG version: 2.0.X
  4rc3

[cagataycivici]

Weird, Unable to replicate, please provide a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/Wj39h1?p=preview

[dmitrimaltsev]

Hi @cagataycivici, I'm facing the same problem:
http://embed.plnkr.co/8DIU4ubqWeXar74j8tXy/

[jp-gouin]

Facing the same issue too , using the last release.

[mernxl]

Same Issue with, [email protected]. Mine gets worst as the lines don't show if zoom out of page. Any Fixes?

[rashnk]

<p-tree [value]="files" layout="horizontal" draggableNodes="true" droppableNodes="true"></p-tree>

Drag and Drop not working in horizontal mode, anything missing

[Muralidharan-Kannappan]

Same issue with the latest version of primeng, please go to the URL https://www.primefaces.org/primeng/#/tree and navigate to Horizontal Tree and expand all child nodes and reduce the zoom level to 90%,

[pcs20]

Same Issue with, [email protected]. Mine gets worst as the lines don't show if zoom out of page. Any Fixes?

esse e outros bug's podem ser resolvidos utilizando o seguinte elemento no seu CSS:

.ui-treenode-connector-line { margin: 0px -1px 0px 0px!important; padding: 0.1px!important; }

[axell9641]

.ui-treenode-connector-line { margin: 0px -1px 0px 0px!important; padding: 0.1px!important; }

I cannot thank you enough. This issue was driving me crazy. May I ask how do you manage to find the solution? I can see that padding: 0.1px is what solves the issue regarding the vertical connector disappearing when you zoom out the screen.