Horizontal scroll always appear

Thread ID:	Created:	Updated:	Platform:	Replies:
147453	Sep 11,2019 09:22 AM UTC	Sep 16,2019 08:38 AM UTC	Vue	3

Subscribe to this post

Tags: Treeview

Konrad Lowczak

Asked On September 11, 2019 09:22 AM UTC

I have modal dialog with treeview control inside.

When text width of one of the treeview items is longer than width of modal dialog - horizontal scroll bar appears in the bottom of treeview component.

How can I set width of treeview component and avoid showing horizontal scroll bar?

Right now it looks like this:

My purpose is behaviour like this:

PS:

Don't worry about '...'. We have component to handle this case.

Thanks Konrad

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On September 12, 2019 09:44 AM UTC

Hi Konrad Lowczak,

Good day to you.

We have validated your requirement and can able to achieve this using the following styles.

/*customTree is a cssClass for TreeView*/

.customTree li .e-list-text {

display: inline-block;

width: 12em;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

Sample: https://codesandbox.io/s/vue-template-m9lzc

Kindly check the above sample and get back to us if you need any further assistance. 

Regards,

Ashokkumar B.

Reply | Reply with quote

Konrad Lowczak

Replied On September 13, 2019 03:00 PM UTC

Thank You for Your help. It works.

Best regards

Konrad

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On September 16, 2019 08:38 AM UTC

Hi Konrad Lowczak,

We are glad to hear that the problem has been resolved. Please let us know, if you need any further assistance.

Regards,

Ashokkumar B.

Reply | Reply with quote

CONTACT US

Horizontal scroll always appear

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US