HTML Elements Forums Forms & Editors ComboBox "tokenClick" and styled elements

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Hristofor 3 weeks, 6 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100924
    Avatar
    edwardsmarkf
    Participant

    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.

    #100927
    Avatar
    Hristofor
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.