TreeView fullrow selection and hover overlaps scrollbars

[Alberto Monteverdi]

Hi,

I tried to use JavaScript TreeView setting overflow:auto of

container div, so scrollbars are shown as needed, but when

I reduce the width of the TreeView (or the width of the TreeView

div container, for example using a split panel) the fullrow that

select every list item both on hovering and selecting overlaps

the scrollbars which are no longer accessible.

How can I get the scrollbars accessible ?

Thank You for help.

Alberto

[Indhumathy Loganathan]

Hi Alberto, 

 

Greetings from Syncfusion support. 

 

We have prepared a JavaScript TreeView sample by rendering it inside Splitter panel. As mentioned we set overflow: auto to enable scrollbar, but we have not faced any overlap issue at our end. The scrollbar also accessible while selecting nodes after reducing the Splitter width. Please find the sample from below link. 

 

https://stackblitz.com/edit/h2nve6?file=index.html 

 

We are not clear on the exact issue you have been facing. So we request you to share us a screenshot or video footage of the issue. Share us the code snippets to replicate the issue at our end. If possible, replicate the issue in the above shared sample. 

 

These details would help us assist you promptly. Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L  

[Alberto Monteverdi]

Hi,

Sorry for delay.

Yes, I have modified the example you provided to new link: the new example

is closer to my project.

https://stackblitz.com/edit/h2nve6-ecb6y6?file=index.html

If I increase the height of the vertical panel the horizontal scrollbar of the TreeView

still remains below the Tree, but I would that it follows the new size of

the panel and it is positioned to the bottom of the panel (The same thing

for the vertical scrollbar to the right of the panel).

How can I do ?

Thank you in advance.

Alberto.

[Indhumathy Loganathan]

Hi Alberto, 

 

We checked the shared sample and understood that you want to adjust the horizontal scroll bar position on pane bottom instead of TreeView bottom. You can achieve this by specifying the below changes for both TreeView and its parent container. Check the below code snippet. 

 

<div> 

    <div class="expand-content" 

    style="overflow: auto; height: 100%; width: 100%"> 

    <!-- Initialize TreeView --> 

    <div id="tree"></div> 

    </div> 

</div> 

 

<style> 

    .custom-tree { 

        display: inline-table; 

        height: 100%; 

        width: 100%; 

    } 

 

Sample: https://stackblitz.com/edit/h2nve6-jxfpke?file=index.html 

 

Please check the shared sample and let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Alberto Monteverdi]

Hi Indhumathy,

It works very well, thank you very much.

Best Regards.

Alberto Monteverdi.

[Ranjani Prabakaran]

Hi Alberto, 

You are welcome. Please don’t hesitate to contact if you need any further assistance. 

Thanks, 

Ranjani