Padding on child item in tree component

Ignition
1

Hi,
Is there a way to do margin on child elements in a tree component.
image
I have a slide menu but when I expand the child on my tree component, and the menu go back to his original size we see the item child troncated.
I want to add a margin to hide the child items.
Maybe by using stylesheet css ?
Thanks

2

I want to add a margin to hide the child items.

This sounds like a bad idea. If the row is expanded then the contents should be visible too.

1 Like
3

When the content is expanded, It will be visible but only when the menu is expanded too like this:
image

The menu get expanded on mouse over.

4

I'd suggest you instead replace the whole menu for something else when it's collapsed, so that you can't see any items, and show it back when it's expanded.

But that's up to you, so here goes:

.tree .node-wrapper > div > .parent-node, .terminal-node {
	margin-left: 30px;
}
3 Likes
5

I did what I wanted thanks to you I just adapt it to the terminal-node row to not margin on the other "main" row:

.tree .node-wrapper > div > .parent-node, .tree .node-wrapper > div > .terminal-node {
	margin-left: 17px;
}

Here is the result:

  • Menu colapsed

image

  • Menu expanded :

image

6

The default icon space property wich could work as padding for all tree items

.tree .expand-icon, .tree .terminal-expand-icon {
    flex: 0 0 1.5rem;
    pointer-events: unset;
    min-width: 1.5rem;
}

try making it bigger:

.tree .expand-icon, .tree .terminal-expand-icon {
    flex: 0 0 3.5rem;
    pointer-events: unset;
    min-width: 1.5rem;
}
7

I'm sorry but... It's ugly :X

Don't you wanna try something like this ?
image

image

1 Like
8

No cause the customer want to see where he is when the menu is collapsed

9

How is he going to see that if you hide the leaf of the tree anyway ?
You can display that info instead of the vertical "Menu" of my example.
text, icons, whatever the customer thinks is clearer/cleaner, but this:
image
doesn't say much about where he is at the moment. I can guarantee no customer would be happy about this.

10

Maybe if you could have a little more space to just show all icons?

Or if you alline all the icons on the left?

.psc-collapseMenu svg,.psc-collapseMenu .label-wrapper,.psc-collapseMenu .tree-alignment {
 display: none;
}
.psc-collapseMenu svg.node-icon {
 display:block;
 position: absolute !important;
 left:0 !important;
}

image

image

11

I change to a breakpoint container to not use the margin as we saw before according to advice I receive from you guys to have a better visualisation of where you are in the app.
Here is the result: