CSS to change size of tree Icons

Webix JS
#1

How can I change the size of the plus and minus icons of a tree? I have tried editing the css and have had no luck.

Also, is there any way to change the plus and minus icon to two different Font Awesome icons?

you can see here that they are very small, I want to make them big: https://snippet.webix.com/cad9jdld

#2

Hello,

You can add

.webix_view .webix_tree_close,
  .webix_view .webix_tree_open {
  	font-size:40px;
  	width: 40px;
  }

Please check the example: https://snippet.webix.com/poydn4fq

#3

This does not work when the skin is set to material.

Please see here:
Code Snippet

#4

Is this a known bug? Is there any way to set the skin to ‘flat’ for just those icons?

Also, common.space() doesn’t seem to give the correct spacing when the font size is increased. Is there a way to set the size of common.space()?

#5

Hello @zdimaria ,

You can add background-size as

.webix_view .webix_tree_open {
  background-size: 30px 30px;
   ...
}

https://snippet.webix.com/3tumcjls

#6

Hello!

Yes, I see the problem
You can solve it: just add width to the .webix_tree_noneas

.webix_tree_none {
  	width: 46px;
  }

https://snippet.webix.com/d2fn6g7h

#7

@Nastja thank you! – that works to fix the scaling.

However, common.space() still is not aligning things correctly.

In the following snippet you can see that ‘WALL-E’ is aligned too far to the left. Is there a way to fix common.space()?

https://snippet.webix.com/sof6fusu

#8

@Nastja Thank you, that works perfectly! I really appreciate all of your quick help.

#9

You are welcome! :slight_smile: