How to avoid overflow in a dropdown
I have the problem that when filling a dropdown with data of a Datatype through a Datapage, the content overflows.
I have done many tests placing a <br> tag or line break \n directly in the datatype that contains the information that the Datapage of the Dropdown control brings me, but it has not worked.
I have used the css overflow-y, overflow: scroll, etc. but it has not taken effect.
Any idea so that the content doesn't overflow and whether it generates a scroll or makes a line break, respect the length of the dropdown or the modal window, without overflowing.
Thanks in advance.
***Edited by Moderator Marije to add Capability tags***
Eclat Prime
AU
@MARCO_GL Have you tried specifying custom width?
If the full text of the dropdown option is not visible, we could show a smart tip on hover and display the full text.
Capgemini
GB
Pega drop downs use the basic <select> + <options> HTML.
These unfortunately have very limited options for styling with CSS because they are based on OS features.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
"Styling with CSS
Styling the <option> element is highly limited. Options don't inherit the font set on the parent. In Firefox, only color and background-color can be set however in Chrome or Safari it's not possible to set any properties. You can find more details about styling in our guide to advanced form styling."
As an alternative you could try using the other single select controls like Anypicker or Autocomplete as these have options for configuring the results display (although these options don't seem to work properly for me). At the very least since they use other HTML elements to build the results list, it would be possible to write your own CSS overrides if you need custom behaviour.
For the Anypicker I was able to apply styling to the results page by overriding this CSS class
.anypickerPO {
width:300px;
}