Dropdown Height

[daniele1]

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 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

[victordcq]

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.

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

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

more info i posted here:

Perspective Table How to Handle Right Click Copy Event

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. [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

.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

[daniele1]

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

[victordcq]

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

[daniele1]

Ok, thanks for the explanation

[nminchin]

@victordcq

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%; }

[Ivan_H]

Interesting. The percentage is with respect to what?

[nminchin]

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

[Chris_Murphy]

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

.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.

[Jiri_Pise]

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.

[Transistor]

Welcome to the forum. Please see Wiki - how to post code on this forum.

[victordcq]

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

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

[dkhayes117]

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