Dropdown Resize Perspective

Ignition
1

Apologies if this has already been addressed :sweat_smile:...haven't been able to find this issue on the site.

Anyway, I'm trying to change the height of a dropdown box (to show more options) when selecting something inside of it. Is there a prop/parameter I need to add? I have added and changed anything I can find that seems related (under the dropdownOptionStyle prop). Not sure if that's even where this would be configured.

Would appreciate your help on this. Thanks!

2

You're going to need stylesheets.css to pull this one off.

A few things to establish:

  1. The dropdownOptionStyle applies to the individual options, not to the container itself.
  2. The container is a modal, a free-floating div that we need to capture and modify
    a. Resize your screen with a dropdown open to see what I mean by "free-floating"

What you'll need to do is this:
First, add the extended-dropdown (or whatever name you want to give it) to your dropdownOptionStyle.classes property. The other styles don't matter here.

image

Then add the following code to your stylesheet.css:

div.iaDropdownCommon_options_modal:has(> div > div > div.iaDropdownCommon_options > a.iaDropdownCommon_option.psc-extended-dropdown) {
	border: 5px dotted blue; /*Only for illustration purposes*/
	max-height: 500px !important; /*Set this to whatever you want, default is 350px.*/
}

Remember to match the extended-dropdown name between the classes and css above.

If you've done exactly as I have (silly borders and all), your dropdown should go from looking like the one on the left to the one on the right.

image

Here's a screenshot of the html and css so you can have an idea of why we have to do it this way (unless there's another more sane method lol).

image
image702×215 16.4 KB

1 Like
3

As of 8.1.29 there's minMenuHeight and maxMenuHeight properties available on the dropdown:
https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Dropdown

But those only change the height - your description is a little unclear (length could be along either axis) - if you're trying to make the width greater than the component itself, then you'll need the stylesheet.

2 Likes
4

I did not see that there :sweat_smile:

Do prefer this option if you don't need more width!

5

Thanks. Unfortunately I'm stuck on 8.1.7 for a little while. IT is afraid to upgrade at this point. But I'm trying to change the height (I want the dropdown to include more available selections). Thank you anyway

6

Thanks for the detailed help! I am pretty new to Ignition (~2 yrs, but not a lot of development), and I've been using Perspective for maybe 6mos.

What is stylesheets.css?

1 Like
7

You're on such an old version you don't have the stylesheet either.

You really need to upgrade.

1 Like
8

Bummer. Thank you...I'm in the middle of a small project, and there have been so many things I've had to do that would have been soo much easier if I could upgrade to the newest version. I'll start putting IT's feet to the fire on this.

Appreciate your help

1 Like
9

Maybe this deserves its own thread, but what reasons (besides nicer development tools) could we give a customer to upgrade when they're hesitant about the risks of downtime? And what is a safe version to upgrade to, given that a couple versions were retracted after first being released? (looking at you, v8.1.29 and v8.1.34)

10

"Safe" can only be reliably determined by loading your gateway backup into an isolated test system with the new version with substitutes for databases and devices.

If you have a good gateway backup and a decent downtime window, and the new version is ~ week old, your odds are good for an upgrade in place. :roll_eyes: But with the option to reinstall old and restore the backup.

I also like to take a filesystem snapshot just prior to an upgrade in place, so a revert is super-fast.

2 Likes