Modal Dropdown Behaviors

Ignition
,
1

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

.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

2

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 using the similar CSS you have there.

3

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

#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
image835×451 35 KB

4

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

80% is just way to much.

5

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

Maybe, but 4 items is just way too little.

6

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