Multiline tree

Suite and Optimus Suite 5
#1

I’ve changed the height of the fonts and elements in the dhtmlxtree css file so the text appears bigger.

Two questions:
(1) In the html table element that holds the node, I have vertically changed the heights.

html > body /**/ .dhxtree_dhx_skyblue .selectedTreeRow{ padding:0px 0px 0px 0px; line-height:normal; display:inline-block !ie; height:29px;}body:nth-of-type(1) .dhxtree_dhx_skyblue span.selectedTreeRow{ padding:0px 0px 0px 0px; display:inline-block; padding-top:0px; height:29px;}body:nth-of-type(1) .dhxtree_dhx_skyblue span.standartTreeRow{ display:inline-block; margin-top:auto; margin-bottom:auto; height:29px;}

This looks great in my tree, but my text is top-aligned, is there a way to vertically center it in the CSS?
I guess the span element?

vertical:align doesn’t work.

(2) I also have multiline enabled, but when the larger text wraps the the TD size seems to only double by some default height, not the height of the larger font size . Where I can I find the parameters that regulate the multiline display height.

I tracked it as far as the this.mlitems, but I can’t find either a default pixel size or default TD height?

Thanks

#2

Can you please provide complete demo where we can reproduce it? You can find tutorial how to create complete demo here docs.dhtmlx.com/doku.php?id=othe … leted_demo

#3

Here are the files. I also call the underscore library, hence the _. syntax, but this is just for easy array manipulation and has nothing to do with the tree.

Thanks.

#4

Also, I have played around with the function that pulls the HTML of the NODE. When I checked the innerHTML. It seems that it is

TEXT , I tried putting some putting in some extra elements (it would be great if I could add some extra elements, particular if I could put some extra images in there or a text node that is not linked to the span with the text), but when I did a drag and drop, it threw an error indicating that those elements are referenced by array and thus by adding a new element it throws off the count.

Not too important, but is there any easy way I can jam some more HTML elements in the

, without terrifically screwing up everything?

Thanks

#5

Anyone, anyone?

#6

If you enabled multi-line mode, if would be better to hide tree lines as they have fixed sizes:

tree.enableTreeLines(false);

Here is the sample dhtmlxTree/samples/01_appearance/04_pro_multi_line.html

it would be great if I could add some extra elements, particular if I could put some extra images in there or a text node that is not linked to the span with the text

You may try to place html as item label and place image and other necessary elements in label.

FYI - We have deleted your attachment as it contented libraries from PRO edition. You can submit support ticket - support.dhtmlx.com/

#7

Hi, Thanks for the response.

But my question was, If I increase the font-size in the tree, and all the elements that hold it (in the dhtmlxtree.css file), so I get bigger text in the tree (which works nice). Then I make it multi-line, when I reach the end of the line, and start a new one, the

or or , height increases by a certain amount to hold the wrapped text. It seems the amount that it increases is fixed to the default font size (10px?), so the wrap does not show all of the text.

Is there a way to fix this?
#8

Hi,

You set 29px height for the tree items in the css. For example:
body:nth-of-type(1) .dhxtree_dhx_skyblue span.standartTreeRow{ display:inline-block; margin-top:auto; margin-bottom:auto; height:29px;}

The original dhtmlxtree.css doesn’t limit item height.

#9

Hi,

My solution was to change this part of the CSS:

html > body /**/ .dhxtree_dhx_skyblue .selectedTreeRow{ padding:0px 0px 0px 0px; line-height:normal; display:inline-block !ie; height:29px;}body:nth-of-type(1) .dhxtree_dhx_skyblue span.selectedTreeRow{ padding:0px 0px 0px 0px; display:inline-block; padding-top:0px; height:29px;}body:nth-of-type(1) .dhxtree_dhx_skyblue span.standartTreeRow{ display:inline-block; margin-top:auto; margin-bottom:auto; height:29px;}

To this:

html > body /**/ .dhxtree_dhx_skyblue .selectedTreeRow{ padding:0px 0px 0px 0px; line-height:normal; display:block !ie; }body:nth-of-type(1) .dhxtree_dhx_skyblue span.selectedTreeRow{ padding:0px 0px 0px 0px; display:inline-block; padding-top:0px;}body:nth-of-type(1) .dhxtree_dhx_skyblue span.standartTreeRow{display:block; margin-top:auto; margin-bottom:auto;

Now when I change the font size in multiline mode, it automatically accomodates the larger font size.

Also, in multiline mode, the editing box is still one line because it is a input textbox, so it goes off screen if you have alot of text.

In order to change it to textarea, (which wraps) go to the dhtmlxtree_ed.js file and
change it, go inside the _editItem prototype function and about 20 lines down, change the innerHTML from to to:

temp.span.innerHTML="";

Hope this helps anyone with the same problem.

#10

Yeah so it was my bad for putting the 29 px in the css