Hi,
I kept a search dropdown. The values in the search dropdown are not fitting properly. I don't want to expand the dropdown width itself. Instead I want to expand the dropdown values. Is there any solution for this or do I need to put a tooltip?
This can be solved using CSS!
CSS -
.pc-dropdown .choices__inner {
height: 30px !important; line-height: normal !important; border: none;
}
.choices[data-type*="select-one"]:after {
top: 4px !important;
.pc-dropdown .choices__list.choices__list--dropdown {
width: 25em;
.pc-dropdown .choices__list--dropdown .choices__item {
text-overflow: ellipsis !important;
white-space: nowrap !important;
You can customize this css as per your requirement.
Apply "pc-dropdown" css class to the enclosed container style class
Thanks for the response.
Is this a in built css style class to use?
You have to add this in css tab, which is located at the top
Hi, thanks for the reply.
I added the same css and also tried width as 50em.. but still the drop-down values are not fitting like your image. Can you please help me?
Can you please share your oml !
Regards,
Aditya
I can't able to share the file. Can I put a tool tip for the drop-down value ?
Hello @Gayathri Gali
There are some solutions which I can suggest to you.
add a tooltip to the options or you can wrap the text so that it will take the next line.
I am attaching examples for both of them it will help you.
Using whitespace wrap
.vscomp-option-text { white-space: wrap !important; }
Sample - https://personal-ejuytnht.outsystemscloud.com/SampleForumPOCS/ContactFOrm?_ts=638252081184378783
Oml is attached for this
And for the tooltip you can refer to the same post here - https://www.outsystems.com/forums/discussion/89872/add-tooltip-for-drop-down-values/
I hope this will helpBest RegardsTousif Khan
Thanks for the response,
I'm working on a search dropdown where editing is not possible because this widget does not have a style class property. Is there any other way to add a tool tip for the larger dropdown values or any other way since there is no style class property?
In my example, I did share the solution for dropdown search,
You need to simply add the css to your screen. no need to add any class to your dropdown.I need to know why you cant add the css to your screen style sheet?
What exactly you are looking for then?
Can you share some Example POC then!
Thanks
.vscomp-option-text {
white-space: wrap !important;
This is working fine but not for words with long length for eg.. it's not working for this word..
Verzekeringsrecht/polisvoorwaarden
Please help me
Hi ,
The words are not going in 2 lines. Thanks for this but I want to put a hyphen when the word breaks.
Can I know this solution?
As of now, I kept as
. vscomp-option-text{
white-space:wrap ! important;
word-break:break-all;
Please help me how to put a hyphen.
The words are now gng in 2 lines. Please excuse this grammar mistake above.