How to make the horizontal scrollbar of tree fixed in the bottom?

[Jzy]

Hi,

I have one tree view example given in the following link:

https://codesandbox.io/s/88pq4z38y2

It shows that the position of horizontal scrollbar is always beneath the tree, how to make it fixed in the bottom of the page?

Thanks,

Jzy

[Christopher Issac Sunder K]

Hi Jzy, 

Thank you for contacting Syncfusion support. 

You can make the horizontal scrollbar of tree fixed in the bottom by setting min-height css for ul element of treeview. Please find the code snippet. 

.e-treeview .e-ul { 

    min-height: 400px; 

} 

Sample: https://codesandbox.io/s/2jwp22n3wn 

Please let us know if you have any concerns or if we misunderstood your query. 

Thanks, 

Christo 

[Jzy]

Hi Christo,

It seems that maybe you misunderstood my query. I expect the horizontal scrollbar should be fixed in the bottom of the page instead of the bottom of the tree. 

In the example you gave, the horizontal scrollbar is showed until I scroll down to the bottom of the tree. 

Thanks,

Jzy

[Christopher Issac Sunder K]

Hi Jzy, 

We regret for the inconvenience caused. 

You can make the horizontal scrollbar fixed on the view by making the root element of the treeview as display: inline-block. When we set it as inline-block, we also need to maintain the container element (in your case #app) should have a property overflow: auto, in order for treeview to work properly. 

Here, we have modified your previous sample.  

https://codesandbox.io/s/xj14kl9vvz 

Please let us know if your issue still not resolved. 

Thanks,
Christo

[Jzy]

Hi Christo,

Thank you so much for your help. It did solve my problem. 

Sorry that I have another issue. 

Here is the example:

https://codesandbox.io/s/4x5omx867

When the width of the container element (#left_container) is set to 40% and one tree node is selected, it seems that the selection area is not equal to the width of #left_container. 

If the width of tree (#treeview)  is set to 100% to make it work,  then if one node text is too long (for example, click "change tree data" button on the top of tree), the horizontal scrollbar won't be fixed on the bottom of the view. 

In that case, how to make both (selection area is equal to the width of #left_container & horizontal scrollbar is fixed on the bottom of the view) work since the data of tree will change?

Please let me know if  my description is not clear. 

Thanks,

Jzy

[Christopher Issac Sunder K]

Hi Jzy, 

We understand your issue with scroll, since your requirement is similar to html table where the longest width will be applied to the other element, similarly by making our Treeview display: inline-table we will be able to achieve similar result and with width: 100% it will be stretched to edge even in the smaller text. 

 

Sample: https://codesandbox.io/s/6v547j8x4z 

Please let us know if you face any issues. 

Thanks,
Christo 

[Jzy]

Hi Christo,

Thank you so much for your help!

Thanks,

Jzy