Question

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?

Correct Answer
August 22, 2019 - 2:49pm

Hi @AndrewWebster,

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?

<style>

.token-content{
    max-width :2000px;
  }

</style>

Hope this resolves the issue.

Regards,

Priyabharathi

Comments

Keep up to date on this post and subscribe to comments

August 22, 2019 - 2:49pm

Hi @AndrewWebster,

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?

<style>

.token-content{
    max-width :2000px;
  }

</style>

Hope this resolves the issue.

Regards,

Priyabharathi

August 23, 2019 - 4:13am
Response to Priyabharathi

Hi Priyabharathi

Yes, this works - many thanks.

I did actually try this yesterday, but I think I had a caching issue as it didn't work. After seeing your posting I thought I'd give it another go today and it worked as expected.

August 22, 2019 - 9:00pm

Hi Andrew, 

Please do a content-search with "token-content" and check the files where this is defined. Is this the css class "token-content", reason being I tried to search, but I could not find.

Second thing if you are planning to increase the max-width, check if the wrap is happening or not. It might just break in IE. If not also put a text wrap on this css class.

Hope it helps.

August 23, 2019 - 4:10am
Response to Rachit_Agarwal

Thanks for the reply Rachit. I did search for token-content, but like you couldn't find it. For reference, I have got it working (see posting below) in IE