Perspective - Set Number of options shown in dropdown / change dropdown options height

Version: 8.0.13 RC1

Today I noticed that my dropdowns were a lot shorter than they used to be and are only showing 5 items. After doing some digging it seems there is a bit of CSS in place that sets the max-height of the dropdown options where afaik it wasn’t there before.

the css that sets the max-height property is .iaDropdownCommon_options_modal so I decided to attempt to override the css using the newly added style options but as you can see, my added style was overridden instead
image

Is there a way to override the max-height property either within the designer, or using css. I couldn’t find where iaDropdownCommon_options_modal was declared

image

Edit: to anyone looking to do this themselves without waiting for built in support, add this to your css file with the caveat that this probably will break if IA change any of the css rule names along the path to the dropdown options modal:

.ia_componentModal.component-modal-large-viewport.component-modal-below.hide-arrow.iaDropdownCommon_options_modal {
    max-height: 80%;
}

Not sure exactly why this works as I am not a web developer but I’d guess that it’s more specific than .iaDropdownCommon_options_modal so it takes precedence over it.

Yep, that’s exactly right. If you want to do it another way, you could declare your rule for iaDropdownCommon_options_modal with an !important modifier.

There’s no way to do so entirely within the designer - you will have to customize or implement your own theme. Your changes to the CSS files are subject to overwrite any time you update, so if you want to, copy and customize your own theme - it’ll be ‘safe’ and will (as of 8.0.13) be copied into gateway backups so you don’t have to worry about losing that customization.

Depending on which file you put this into, this solution might only work for a specific theme (ie: “light” but not “dark”).

I haven’t tested this, but it looks like themes/light/common/dropdown.css is the file you should include this in. Other files might work for certain themes, but this file should place the styling across all the supplied themes.

Long-term, you should probably place this style rule into a dropdown.css file in a directory you have placed yourself, something like themes/StyleOverrides/dropdown.css (no need to copy the existing dropdown.css file). Then modify light.css to look like this:

@import "./light/index.css";
@import "./StyleOverrides/dropdown.css";

This should result in your dropdown changes being applied after anything we do in the future without needing to worry about whether your changes might be wiped by an update.

1 Like

Thank you both for your responses.

I’ll take note of the !important modifier. That seems very helpful for cases like this!

I have already implemented my own custom theme (by following the ##Creating Custom Themes secton of the readme) that overrides certain rules from light.css. Am I correct in assuming these custom theme files won’t be overwritten upon an update? I didn’t make any changes to the base themes.

Correct. We should never touch files within the themes directory unless they are files we put there. Due to recent changes, those custom theme files should also now be included in Gateway Backups, so you can take them with the Gateway.