Hi everyone, I want to remove or hide the clear icon inside the dropdown tag as the attached image below. Thank you
Hi
I don't think there's a property we can use from VirtualSelect to hide it, but using CSS you can. You can add this on your Application Theme
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button {
display: none;
}
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
padding: 6px 10px 6px 10px;
EDIT
Well, there's actually is a property from VirtualSelect you can use.
OutSystems.OSUI.Patterns.DropdownAPI.SetProviderConfigs(
$parameters.WidgetId,
Providers.OSUI.Dropdown.VirtualSelect.Utils.NormalizeVirtualSelectConfigs({
'showValueAsTags': false
})
);
You can use this on the DropdownTagsInitialized event.
But it will make your selection show on Text and separated with commas instead of inside Tags
Please let me know if this solves your issue.
Regards,
Kharlo
@Thuan Pham Dinh
Out of curiosity, how are users suppose to remove their picked options without a remove icon? One of the UX guidelines is to offer users a way to undo/redo their steps, so they can fix their mistakes. As a user I would be a bit annoyed if I picked the wrong option and cannot replace it with the correct one.
Actually I want to remove the clear icon in dropdown tag only in View mode.
Hi @Geertjan Jacobs
That's a very good point. But the user can always unselect through the dropdown popup. Or the clear button on the right.
- Kharlo
What about using the DropdownDisable action to prevent users from removing options?
@Kharlo Ridado In case of a very long list it could be bothersome to find the option you selected. And I see a 'remove all and add again' more as a workaround instead of a solution to the problem.
In addition, I would never overwrite the default behavior of standard elements in the Application Theme but rather create a custom css class that you can add, so you have control over where this widget is changed.