# Padding on child item in tree component **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [July 25, 2024, 11:49am UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737 "2024-07-25T11:49:32Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![valentin.guichard](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@valentin.guichard](https://forum.inductiveautomation.com/u/valentin.guichard)\ **Post date:** [July 25, 2024, 11:49am UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/1 "2024-07-25T11:49:32Z")
Hi, Is there a way to do margin on child elements in a tree component. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/3/73e685502c8b8011bf08f2996b02ea74d7ee6723.png) 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 ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 25, 2024, 12:57pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/2 "2024-07-25T12:57:42Z")
> 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. ---
**Author:** ![valentin.guichard](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@valentin.guichard](https://forum.inductiveautomation.com/u/valentin.guichard)\ **Post date:** [July 25, 2024, 2:20pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/3 "2024-07-25T14:20:27Z")
When the content is expanded, It will be visible but only when the menu is expanded too like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/f/af1c0ccdc76c3ab156ad52ac98eb6650d2d4f124.png) The menu get expanded on mouse over. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 25, 2024, 3:27pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/4 "2024-07-25T15:27:49Z")
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: ```css .tree .node-wrapper > div > .parent-node, .terminal-node { margin-left: 30px; } ``` ---
**Author:** ![valentin.guichard](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@valentin.guichard](https://forum.inductiveautomation.com/u/valentin.guichard)\ **Post date:** [July 26, 2024, 12:54pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/5 "2024-07-26T12:54:15Z")
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: ```python .tree .node-wrapper > div > .parent-node, .tree .node-wrapper > div > .terminal-node { margin-left: 17px; } ``` Here is the result: - Menu colapsed ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6dfa8cc48db8fb38873befb16ddd120f69c3b482.png) - Menu expanded : ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8fd7e0d65e01e8ec52934ae8d64617ecb840069b.png) ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [July 26, 2024, 1:21pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/6 "2024-07-26T13:21:12Z")
The default icon space property wich could work as padding for all tree items ```python .tree .expand-icon, .tree .terminal-expand-icon { flex: 0 0 1.5rem; pointer-events: unset; min-width: 1.5rem; } ``` try making it bigger: ```python .tree .expand-icon, .tree .terminal-expand-icon { flex: 0 0 3.5rem; pointer-events: unset; min-width: 1.5rem; } ``` ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 26, 2024, 1:29pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/7 "2024-07-26T13:29:47Z")
I'm sorry but... It's ugly :X Don't you wanna try something like this ? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/55a6584891ee6ebee726d18c3ed1d7bed3429bf2.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd72db9d892e9bdbbcba843e6560da1261a0cb3b.png) ---
**Author:** ![valentin.guichard](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@valentin.guichard](https://forum.inductiveautomation.com/u/valentin.guichard)\ **Post date:** [July 29, 2024, 9:51am UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/8 "2024-07-29T09:51:32Z")
No cause the customer want to see where he is when the menu is collapsed ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 29, 2024, 9:57am UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/9 "2024-07-29T09:57:11Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6dfa8cc48db8fb38873befb16ddd120f69c3b482.png) doesn't say much about where he is at the moment. I can guarantee no customer would be happy about this. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 29, 2024, 10:51am UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/10 "2024-07-29T10:51:03Z")
Maybe if you could have a little more space to just show all icons? Or if you alline all the icons on the left? ```python .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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bfb7963e3bd7dad0203100835488adca3e7b0e6.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/5327672cb10af8582861e83d7ea519e67c5263a0.png) ---
**Author:** ![valentin.guichard](https://avatars.discourse-cdn.com/v4/letter/v/2bfe46/32.png) [@valentin.guichard](https://forum.inductiveautomation.com/u/valentin.guichard)\ **Post date:** [July 29, 2024, 2:26pm UTC](https://forum.inductiveautomation.com/t/padding-on-child-item-in-tree-component/93737/11 "2024-07-29T14:26:44Z")
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: - Menu expanded: - Menu collapsed: