Support Article
Dropdowns render without a Down arrow in IE
SA-100242
Summary
Dropdowns render without a Down arrow. This occurs intermittently in the Internet Explorer browser.
Error Messages
Not Applicable
Steps to Reproduce
- Log in to the Pega application.
- Navigate to a screen with dropdowns.
Root Cause
A defect or configuration issue in the operating environment.
Issue with either the style background-image: url("webwb/caret-down_12506643515.svg!!.svg"); or the image/image-extension itself. Though the image exists in the Internet Explorer cache, it does not render on the UI.
Resolution
Perform either of the following local-changes:
- Use a different image for the background and Add the below style in the application CSS.
.ie select{
-webkit-appearance: none;
background-image: url(webwb/pzcaret-down.png) !important;
background-repeat: no-repeat;
background-position: center right .3em;
background-size: 1em;
padding-right: 1.5em;
} - Override the webkit-appearance style from the existing styles to make the dropdowns look like they are native.
.ie select{
-webkit-appearance: menulist !important;
-moz-appearance: menulist !important;
background:none !important;
padding-right:0px !important;
}
.ie select::-ms-expand {
display:block !important;
}
Published May 30, 2020 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.