# Modal Dropdown Behaviors

**URL:** <https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 9, 2023, 2:16pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634 "2023-08-09T14:16:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [August 9, 2023, 2:16pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634/1 "2023-08-09T14:16:13Z")

</div>

I have a CSS style to limit the height of a modal dropdown list like so:

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

```

However, this seems to force all dropdowns to be modal. I have one particular list that is very long and would require a scroll bar on the modal popup, but there is no scroll bar.

If I comment out this style the scrollbar appears in the dropdown, but the dropdown only displays 4 items at a time, which is not ideal.

How can I create a secondary style for this long dropdown that would display a bunch of items and still allow a scroll bar?

Version 8.1.27

---

<div class="post-metadata">

**Author:** ![aaronrai24](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aaronrai24/32/87248_2.png) [@aaronrai24](https://forum.inductiveautomation.com/u/aaronrai24)\
**Post date:** [August 9, 2023, 3:10pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634/2 "2023-08-09T15:10:28Z")

</div>

Maybe try giving the specific dropdown that you require to have this max-height attribute a domID by adding it to the meta category on the component. Then you can [style that specific domID](https://stackoverflow.com/questions/10974703/applying-css3-style-to-specific-id) using the similar CSS you have there.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [August 14, 2023, 1:02pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634/3 "2023-08-14T13:02:30Z")

</div>

Does this id need to be unique? If I have say 3 dropdowns that need that max height, can I assign them all the same id and apply the style to the one id, or do I need 3 unique ids?

edit:  
I tried this with one dropdown, and it didn't seem to work, unless I've added the styling in the wrong place.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7ec9f18a071b3581dc002969ad6236f43faa182b.png)

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

```

I think the problem is that the domId set in the meta category is for the dropdown box itself, not for the modal dropdown list. So, there's probably not a way to get to that dropdown from the component's domId.

Using Chrome to inspect this modal, I can't even find where the "max-height: 80%" is even applied in the CSS.

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

---

<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:** [August 14, 2023, 2:28pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634/4 "2023-08-14T14:28:04Z")

</div>

you cant apply an id to the dropdowns "popup".

80% is just way to much.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [August 14, 2023, 2:30pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634/5 "2023-08-14T14:30:36Z")

</div>

That's basically what I found - so the ID idea will not work.

> [@victordcq](#):
>
> 80% is just way to much

Maybe, but 4 items is just way too little.

---

<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:** [August 14, 2023, 2:32pm UTC](https://forum.inductiveautomation.com/t/modal-dropdown-behaviors/77634/6 "2023-08-14T14:32:35Z")

</div>

best use a fixed value, or even better a searchable combobox