"tokenClick" and styled elements

[edwardsmarkf]

hello –
i need to be able to style my ComboBox elements and use the new “tokenClick” event option, with different elements having different styles.
it appears that embedding a <span></span> tag in the element conflicts with the new “tokenClick” option:
https://codepen.io/edwardsmarkf/pen/gOPbNmZ
i would like to revisit this previously mentioned issue if possible.
thank you very much.

[Hristofor]

Hi edwardsmarkf,
you shouldn’t be adding HTML into the dataSource array because it is parsed as string and will become the actual item label and value. In your case the item will be labeled ‘<span>Affogato</span>’ in the change event and other places as well. If you need to change the HTML of a dataSource item, there is a itemTemplate property that accepts HTMLTemplate element. Here’s a demo. If you need to change the HTML of a token item, there’s a tokenTemplate property that also accepts HTMLTemplate element. Here’s a demo. If you need to style a token then you should use CSS instead.
However we consider this as an issue and it will be fixed in our next release. Smart.ComboBox tokens can be styled via the following CSS selector:

.smart-combo-box .smart-token {
font-weight: 600;
}

or if you need only the label of the token, then:

.smart-combo-box .smart-token .smart-drop-down-list-selection-label {
font-weight: 600;
}

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts