How to Change Multi Select Token Size
We have a multi-select control that allows the user to select a number of options - each of these options consists of 'longish' text e.g. "Request New Site Security Pass".
The issue we are experiencing is that when the selected options are displayed as the lozenges, they are limited in size, with the text being truncated followed by an ellipsis. e.g. "Request New Sit...". We want to be able to display the entire text without truncation.
We have tried changing the multi-select component in the application skin by adding appropriate CSS elements. This seems to work ok when viewed within the skin but isn't working when being rendered in the portal. Inspecting the CSS of element shows that there is a max-width attribute set to 150px within the .token-content CSS class, which I assume is generated somewhere in the application as I can't locate it in any rules/data in the system.
Any ideas how to resolve this?
Thank you for posting your query.
Could you kindly try adding the below code either in UserWorkForm or your custom css and see if expected behavior is been rendered in the portal?
Hope this resolves the issue.
Keep up to date on this post and subscribe to comments
- How do I modify the size of the pi-caret-down icon for Multi-select?
- Problem invoking function: pega_importexport_pximportexport.pxHasSchemaChanges--(Boolean), The argument did not contain a SELECT token.
- Multi Select Delete Items in a grid is not vanishing the selected rows in the UI despite the Refresh Section.
- In the mobile application the font-size automatically change to “font-size = 16 px”. How shall I do?
- List with Criteria and Multi select