We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143485 Mar 22,2019 03:20 AM UTC Mar 26,2019 12:02 PM UTC Vue 6
loading
Tags: Treeview
Jzy
Asked On March 22, 2019 03:20 AM UTC

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 [Syncfusion]
Replied On March 22, 2019 10:11 AM UTC

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; 
} 


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

Thanks, 
Christo 


Jzy
Replied On March 25, 2019 03:08 AM UTC

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 [Syncfusion]
Replied On March 25, 2019 10:16 AM UTC

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.  

Please let us know if your issue still not resolved. 

Thanks,
Christo


Jzy
Replied On March 26, 2019 03:36 AM UTC

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 [Syncfusion]
Replied On March 26, 2019 10:37 AM UTC

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. 
 

Please let us know if you face any issues. 

Thanks,
Christo 


Jzy
Replied On March 26, 2019 12:02 PM UTC

Hi Christo,

Thank you so much for your help!

Thanks,
Jzy

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon