Smaller line spacing?

Suite and Optimus Suite 5
#1

Hi,

I found out where to make the necessary changes in the dhtmlxtree.css to make it use a smaller font size. However, the line spacing or cell height stays the same. How can I make dhtmlxtree use a smaller line spacing so I get more items displayed in a given height of the tree box?

I understand that the individual items in a tree are displayed as tree cells, but all my attempts to reduce cell height, including setting padding and margin to zero, didn’t change anything.

So what can I do to reduce cell height to go along with the reduced font size?

Regards, Richard

#2

Hi
You need to apply the next CSS styles:

.standartTreeImage { height: 14px !important; width: 14px !important; } .standartTreeRow { font-size: 9px !important; line-height: 11px !important; } .selectedTreeRow { font-size: 9px !important; line-height: 11px !important; }
And set icon size onXLE:

dhxTree.attachEvent("onXLS", function(){dhxTree.setIconSize('14px','14px')});

Result:

#3

Thanks for the quick response. The CSS you posted works fine, so the font size and table cell height is reduced, but the line spacing is still the same as before.

It seems that the setIconSize() function only affects the tree images, which are disabled anyway in my code by enableTreeImages(false). However, the “+” and “-” icons used for expanding and reducing individual tree levels have the same size as before, which is also visible in your example screenshots. I suspect that this is responsible for the unchanged line spacing.

Is there any way to reduce the size of the “+” and “-” icons?

#4

Sorry, forgot some more things.
See attachment.
12.11.15 tree.rar (58.2 KB)

#5

Great, it works now. Thank you very much.

But that raises the next question: Now that the font size and line spacing are reduced, the indentation of sub-levels looks out of proportion. Is there also a way to reduce the indentation of sub-levels?

#6

Could you provide an image or sample? What do you mean?
It seems like everything is fine with my tree and all the levels of it.

#7

The code is working perfectly. It is just the appearance that I want to adjust.

I modified your code slightly to eliminate lines and images, so the result resembles the way my data are displayed.

The upper tree is the original, in the lower tree I used MS Paint to illustrate what I would like to achieve:

As you can see, the indentation of the lower level items is less than in the original, so they are all moved towards the left, and the total width of the tree is reduced. So how can I influence the amount of space that every sublevel is indented?

#8

Try more this:

.standartTreeRow { padding-left: 0 !important }

My result:


But it is impossible to reduce spaces before childless nodes.

#9

Thank you. Setting the padding to zero makes a little difference. I wish it could be more, but I can live with what is possible.

#10

Ok :slight_smile: