# How do I compress the height of the items in a dropdown list in perspective?

**URL:** <https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 1, 2022, 3:14pm UTC](https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681 "2022-09-01T15:14:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![conrad.fernandez](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/conrad.fernandez/32/38608_2.png) [@conrad.fernandez](https://forum.inductiveautomation.com/u/conrad.fernandez)\
**Post date:** [September 1, 2022, 3:14pm UTC](https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681/1 "2022-09-01T15:14:10Z")

</div>

I have a dropdown list that requires scrolling down the page to get to last item. I would like to compress the vertical spacing, so I created a style with margin set to 0 and padding set to 0. There was no improvement. Is there another property that controls the height of each item in a dropdown list?

Thanks

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8fd8c55fa0b33afa9cd19fefcc30f161a0d70970.png)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [September 1, 2022, 4:16pm UTC](https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681/2 "2022-09-01T16:16:27Z")

</div>

Margin and Padding, along with text size, will tighten up the spacing in the drop down options. The key is to put these style classes under `dropdownOptionStyle` not the general `Style` class.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/8/68be0f6c90c506d3193e4586ef34db11641c8cf8.png)

---

<div class="post-metadata">

**Author:** ![conrad.fernandez](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/conrad.fernandez/32/38608_2.png) [@conrad.fernandez](https://forum.inductiveautomation.com/u/conrad.fernandez)\
**Post date:** [September 1, 2022, 5:43pm UTC](https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681/3 "2022-09-01T17:43:40Z")

</div>

Daniel,  
Thank you so much! I tried this on a dropdown list and it worked fine!

I mistakenly thought the component that I was trying to modify was a dropdown list.  
It is a horizontal menu with multiple items. Where should I add the margin  
and padding in this case?

Currently, I have each item set to the style with zero margin / zero padding.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [September 1, 2022, 5:47pm UTC](https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681/4 "2022-09-01T17:47:48Z")

</div>

I believe you will put it under the style class located under each entry of the items prop.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c76e0d4e9583ec3cea7ff7600dbcc13b919f51da.png)

EDIT:

> [@conrad.fernandez](#):
>
> Currently, I have each item set to the style with zero margin / zero padding.

Oh, you've already done that?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [September 1, 2022, 5:53pm UTC](https://forum.inductiveautomation.com/t/how-do-i-compress-the-height-of-the-items-in-a-dropdown-list-in-perspective/63681/5 "2022-09-01T17:53:50Z")

</div>

Looks like you can use the itemStyle Class to apply a style class to all the items without an entry on each item individually. The individual item style class would be for customizing just one item I guess.

Either way, it seems to work for me on condensing the items.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/539155f2f0ce15554b637d057caa68dc5f494c9e.png)