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
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
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.
2 Likes
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.
2 Likes
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.
I have themes set up like this with a overrides folder. The default light.css file just calls the light/index.css file which then calls a bunch of stuff starting with variables and then everything else. I originally put my calls to the overrides in the light/index.css file because I could control the order of things, but on a gateway reboot that file gets cleared out and goes back to the default. I had to put the calls to the overrides in the light.css file itself.
That is all good and well, except with variables if I wanted to override a global variable. If I can’t override the variables right away then everything else gets created using the default values.
Is this working as intended? The easiest workaround is to change the light.css to directly call everything that the light/index.css file was calling and then I can put the variable override where I need it.