Scrollbar is shown with respect to Tree and not its container component

Question

Hi Team,I have a requirement where the tree view component is shown inside a container component. Issue 1: This container component has a fixed height lets say 200px, now if i expand the tree the scrollbar is shown with respect to tree and the tree overflows outside the boundary of component.Expected : When the tree is expanded, the scrollbar should be shown in container component, the tree should be shown inside container boundary and on scroll i should be able to view the whole tree.Issue 2 : In the tree i have added custom template for tree nodes with a button at extreme right. When i try to drag and drop these type of nodes, the template shown during this process looks like broken.Expected : While drag and drop i should see same template as the tree node.PFA the screenshot of issues in tree.Attachment: tree_expected_behavior_c0fb3c9b.zip

Sharon Sanchez Selvaraj · Accepted Answer

Hi Rohit, 
 
Greetings from Syncfusion Support. 
 
We checked with your provided screenshots and the mentioned issues. 
 
Query 1: This container component has a fixed height lets say 200px, now if i expand the tree the scrollbar is shown with respect to tree and the tree overflows outside the boundary of component. 
 
We have prepared a sample similar to your scenario. In the sample provided below, we have set the height of the TreeView parent container as 200px. And you can notice that, when expanding and collapsing the nodes, the scroller is updated properly within the container and TreeView doesn’t overflow as shown in your screenshot.  We suspect that, some “overflow” CSS in your application may be the reason for this issue. Kindly ensure the styles provided in your end.  
 
Query 2: In the tree i have added custom template for tree nodes with a button at extreme right. When i try to drag and drop these type of nodes, the template shown during this process looks like broken. 
 
In the sample, while dragging and dropping the required nodes, the template is proper in our end and refer to the screenshot below: 
 




  
 
Refer to the sample. 
 
https://stackblitz.com/edit/angular-treeview-sample-with-template-fjox3w?file=app.component.html 
 
Please check with the above sample and if you still face any issues, kindly modify the above sample similar to your scenario(if possible). Else, provide the styles and code blocks used in your application for the specific TreeView’s template and also for the container. This will help us to provide a better solution. 
 
Regards, 
 
Sharon Sanchez S.