# Dropdown Height

**URL:** <https://forum.inductiveautomation.com/t/dropdown-height/48271>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [June 28, 2021, 12:36pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271 "2021-06-28T12:36:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniele1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/daniele1/32/31531_2.png) [@daniele1](https://forum.inductiveautomation.com/u/daniele1)\
**Post date:** [June 28, 2021, 12:36pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/1 "2021-06-28T12:36:09Z")

</div>

Hi,  
i’m looking for a way to increase the height of the dropdown menu in Perspective: I have a list of 90 object and currently the dropdown it’s displaying just 4 that makes the dropdown difficult to use.  
I saw that this can be achieved modifing the css files, in [this](http://forum.inductiveautomation.com/t/perspective-set-number-of-options-shown-in-dropdown-change-dropdown-options-height/34960) topic, but ?'m not a web developer and looking at the project backup I can’t find any css files.  
Can this be achieved directly in the Designer now? Where can I find the css files?  
Thanks

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 28, 2021, 12:44pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/2 "2021-06-28T12:44:41Z")

</div>

The theme.css is found in the theme module i think. i've not really used it.  
You can also inject it in a style class which will still work on every dropdown.  
If you arent used to css or dont not really gonna use it that often this should work for now.

```auto
}.iaDropdownCommon_options_modal { max-height: 300px; }{

```

(300px or whatever you wish, 150px is standard atm)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/1285417a88bed93465e381b358fe81448e8920a6.png)

more info i posted here:

> [@Perspective Table How to Handle Right Click Copy Event](http://forum.inductiveautomation.com/t/perspective-table-how-to-handle-right-click-copy-event/47618/5):
>
> i might have a hacky solution to make it invisible… if you create a style class and paste this }.contextMenuCommon.ia\_contextMenu{display:none;}{ into for example the background image. The copy popup will no longer be visible and clickable. It still triggers the event tho. Also this will now work on all tables you have in the project, so if do want it somewhere else you will have to change it a bit to be more specific. You can “inject” css in the styles. You can probably also c…

**edit newer versions +8.1.22(?)**:  
add `>div:first-child` and `!important`

> [@Chris\_Murphy](#):
>
> not sure when this changed, but on 8.1.22 the override is required on a different class
> 
> ```auto
> .iaDropdownCommon_options_modal>div:first-child {
> max-height: 80% !important;
> }
> 
> ```

Also suggested to use the new feature stylesheet.css instead of the old hacky css injection  
[https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet](https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet)

---

<div class="post-metadata">

**Author:** ![daniele1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/daniele1/32/31531_2.png) [@daniele1](https://forum.inductiveautomation.com/u/daniele1)\
**Post date:** [June 28, 2021, 1:00pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/3 "2021-06-28T13:00:24Z")

</div>

Thanks a lot, that worked.  
As you said I created a Style called Dropdown\_Tall with the BackgroundImage property as }.iaDropdownCommon\_options\_modal { max-height: 300px; }{ and just selected it as the dropdown Style.  
Regards

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 28, 2021, 1:05pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/4 "2021-06-28T13:05:03Z")

</div>

Choosing it as dropdown style has no effect.  
The way this css works will cause it to apply to all dropdowns in the project. No matter what styleclass they have. So you dont have to apply it to any of them specifically 🙂

---

<div class="post-metadata">

**Author:** ![daniele1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/daniele1/32/31531_2.png) [@daniele1](https://forum.inductiveautomation.com/u/daniele1)\
**Post date:** [June 28, 2021, 1:17pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/5 "2021-06-28T13:17:15Z")

</div>

Ok, thanks for the explanation 🙂

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 28, 2021, 3:52pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/6 "2021-06-28T15:52:10Z")

</div>

> [@victordcq](#):
>
> ```auto
> iaDropdownCommon_options_modal { max-height: 300px; }{
> 
> ```

God dayum, I've been looking for this for ages! Thanks

Update: you can also use other units, most usefully % e.g.  
`.iaDropdownCommon_options_modal { max-height: 80%; }`

---

<div class="post-metadata">

**Author:** ![Ivan\_H](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ivan_h/32/28186_2.png) [@Ivan\_H](https://forum.inductiveautomation.com/u/Ivan_H)\
**Post date:** [January 5, 2022, 8:25pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/7 "2022-01-05T20:25:48Z")

</div>

Interesting. The percentage is with respect to what?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [January 5, 2022, 11:34pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/8 "2022-01-05T23:34:07Z")

</div>

The height of the ~~browser viewport~~ container that the dropdown is inside of

---

<div class="post-metadata">

**Author:** ![Chris\_Murphy](https://avatars.discourse-cdn.com/v4/letter/c/c5a1d2/32.png) [@Chris\_Murphy](https://forum.inductiveautomation.com/u/Chris_Murphy)\
**Post date:** [November 17, 2022, 6:54am UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/9 "2022-11-17T06:54:22Z")

</div>

not sure when this changed, but on 8.1.22 the override is required on a different class

```auto
.iaDropdownCommon_options_modal>div:first-child {
    max-height: 80% !important;
}

```

for some reason, this is being applied AFTER my custom theme so I needed the important modifer.

---

<div class="post-metadata">

**Author:** ![Jiri\_Pise](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@Jiri\_Pise](https://forum.inductiveautomation.com/u/Jiri_Pise)\
**Post date:** [December 18, 2023, 11:25am UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/10 "2023-12-18T11:25:50Z")

</div>

Hello, it didnt work for me. I am using version 8.1.26 is there some other way to do it now? Or am I just doing something wrong:

I have created a new Style called DropDown with BackgroundImage property:  
}.iaDropdownCommon\_options\_modal { max-height: 300px; }{  
Then i set the dropdown style class to this DropDown (I know I dont need to but I tried anyways). And it just didnt do anything.

Im using dark-cool theme if that is relevant.

---

<div class="post-metadata">

**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:** [December 18, 2023, 11:31am UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/11 "2023-12-18T11:31:11Z")

</div>

Welcome to the forum. Please see [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 18, 2023, 1:08pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/12 "2023-12-18T13:08:40Z")

</div>

Someone else noted this and updated the solution for newer versions, i'll edit my post too

> [@Chris\_Murphy](#):
>
> not sure when this changed, but on 8.1.22 the override is required on a different class
> 
> ```auto
> .iaDropdownCommon_options_modal>div:first-child {
> max-height: 80% !important;
> }
> 
> ```

---

<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:** [December 18, 2023, 3:49pm UTC](https://forum.inductiveautomation.com/t/dropdown-height/48271/13 "2023-12-18T15:49:54Z")

</div>

Note that version 8.1.30 added maxMenuHeight and minMenuHeight properties to the dropdown component.
