# Perspective Menu Tree Item Height

**URL:** <https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083>\
**Category:** Ignition Early Access\
**Created:** [September 6, 2019, 5:55pm UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083 "2019-09-06T17:55:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vcgasman](https://avatars.discourse-cdn.com/v4/letter/v/ecc23a/32.png) [@vcgasman](https://forum.inductiveautomation.com/u/vcgasman)\
**Post date:** [September 6, 2019, 5:55pm UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083/1 "2019-09-06T17:55:12Z")

</div>

My client has quite a few pages that they would like to add to the Menu Tree Component. In order to fit them on the screen without scrolling vertically I would like to shrink the height of each individual item in the tree. It appears they are about 50px or so but there is a lot of white space above and below the icons. Is there a way to reduce the height?  
Thanks

---

<div class="post-metadata">

**Author:** ![osolorzano](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/osolorzano/32/6432_2.png) [@osolorzano](https://forum.inductiveautomation.com/u/osolorzano)\
**Post date:** [September 6, 2019, 9:07pm UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083/2 "2019-09-06T21:07:34Z")

</div>

On the itemStyle property, you can add a key for `height` and set it to `auto` then also add a key for `padding` and set it to 0 or whatever looks nice to you.

---

<div class="post-metadata">

**Author:** ![vcgasman](https://avatars.discourse-cdn.com/v4/letter/v/ecc23a/32.png) [@vcgasman](https://forum.inductiveautomation.com/u/vcgasman)\
**Post date:** [September 6, 2019, 9:23pm UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083/3 "2019-09-06T21:23:58Z")

</div>

Thanks very much, works great! Any chance that can be exposed by default so other users can find it easier?

---

<div class="post-metadata">

**Author:** ![osolorzano](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/osolorzano/32/6432_2.png) [@osolorzano](https://forum.inductiveautomation.com/u/osolorzano)\
**Post date:** [September 6, 2019, 9:36pm UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083/4 "2019-09-06T21:36:07Z")

</div>

Well, the style property objects can accept pretty much any css style. We just expose the ability to place your own css styles in these areas. There isn’t really a set of default styles that may/may not be useful for any given component as it’s meant to be really open ended in what you can do.

---

<div class="post-metadata">

**Author:** ![indenkleefj](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/indenkleefj/32/10961_2.png) [@indenkleefj](https://forum.inductiveautomation.com/u/indenkleefj)\
**Post date:** [July 7, 2020, 2:36pm UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083/5 "2020-07-07T14:36:02Z")

</div>

Hi,

I tried this and works perfectly for the size of the menu items but the icons within this item are not centered anymore.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f3a2db13929548f5a6dcaa7b2f2163073eca6f0.png)  
Do you know how to fix this?

---

<div class="post-metadata">

**Author:** ![indenkleefj](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/indenkleefj/32/10961_2.png) [@indenkleefj](https://forum.inductiveautomation.com/u/indenkleefj)\
**Post date:** [July 8, 2020, 8:25am UTC](https://forum.inductiveautomation.com/t/perspective-menu-tree-item-height/28083/6 "2020-07-08T08:25:13Z")

</div>

In addition, I have the same problem with the icon of the dropdown.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bcfca75b96e9561b55bacd536a87e7a608f17ed6.png)