Can tree lines wrap for long text?

[JimR]

I'd like to put long text in tree nodes (like a paragraph) and have it all displayed, rather than cut off at the end of one line. Is there a way to allow nodes to wrap text and take up as much vertical space as they need?

[mitchellsimoens]

You can inspect the DOM To play with the CSS rules to make it wrap.

[JimR]

I've tried. I've changed white-space to normal (it is set to nowrap by default), clip is auto (which means no clipping), I've adjusted the line heights to see if that was limiting the box from growing, I've set overflow to visible... Running out of ideas. Any thoughts?

Here is the firebug "Computed" output for one row of the tree after applying my custom css (not all changes I tried are repsented here, since when some didn't do anything I reverted them):

font-family	tahoma,arial,verdana,sans-serif
font-size	11px
font-weight	400
font-style	normal
font-size-adjust	none
color	#FF0000
text-transform	none
text-decoration	none
letter-spacing	normal
word-spacing
line-height	16px
text-align	left
vertical-align	middle
direction	ltr
text-overflow	ellipsis

Background

background-color	transparent
background-image	none
background-repeat	repeat
background-position	0 0
background-attachment	scroll
opacity	1

Box Model

width	486px
height	18px
top	auto
right	auto
bottom	auto
left	auto
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-color	#FF0000
border-right-color	#FF0000
border-bottom-color	#FF0000
border-left-color	#FF0000
border-top-style	none
border-right-style	none
border-bottom-style	none
border-left-style	none
box-shadow	none

Layout

position	static
display	block
visibility	visible
z-index	auto
overflow-x	visible
overflow-y	visible
white-space	normal
clip	auto
float	none
clear	none

Other

cursor	pointer
list-style-image	none
list-style-position	outside
list-style-type	disc
marker-offset	auto

[JimR]

Never mind -- it is the "line-height" tag on x-grid-cell-inner. I'll post the change when I find an elegant one, since I've seen this question asked before.

[JimR]

Here is the solution, for those who do not wish to change things programmatically (which might be cleaner in terms of making sure nothing else is inadvertently targeted). This requires nothing but CSS.

/* tree_wrap should be set as the cls for your TreePanel, under Ext.AbstractComponent
  However, this will place tree-wrap several div's up the heirarchy from the actual 
  element you are targeting. So, x-grid-cell-inner is used with a descendent selector
  to be more precise. Hopefully, the combination will avoid applying the styles to
  anything unintended.
  
  Only the height and white-space are actually needed. The other lines make it pretty.
*/
div[class~="tree_wrap"] div[class~="x-grid-cell-inner"]
 {
 height:    auto   !important;
 white-space:  normal  !important;
 text-indent: -3.3em  !important;
 padding-left: 3.3em   !important;
 padding-right: 1em  !important;
 }

[mitchellsimoens]

Very very nice work!!!

[epinc]

OK I am missing something

I added the css, added cls:"tree_wrap" to my tree panel, and still no wrap.

What am I missing? Thanks!

[JimR]

I hate to say this because it's so common as to be trite, but it's true: Firebug is your friend. That's the only way I figured this out, and it's probably how to tell what's wrong in your case. Is the style being applied where you think it is? If you can't find the problem and can post a working version of your code somewhere, I'd be happy to take a look.