Use HTML in Crayons fw-select-option

App Platform
1

We are starting to convert our app to Crayons and I am having issues trying to use HTML in the fw-select-option tag. I want to add an icon to the select option text. The html-content attribute doesn’t work.

I got it to sort of work by setting the html atrribute and putting html where the option text would normally go however the selected option is not displayed and it won’t work with anything other than fw-icon.

2

@RobAtOpinyin
Good Day!
You are not allowed to use anything other than fw-icon and can you please try with the below code snippet

<fw-select label="House Name" required="true" value="1" placeholder="Your choice" state-text="Select singluar option">
  <fw-select-option value="1" html htmlContent option-text="Starks"><fw-icon name="add-contact" size="18" color="green"></fw-icon>
Starks</fw-select-option>
  <fw-select-option value="2">Lannisters</fw-select-option>
</fw-select>

this will solve your case i.e select option will displayed in the dropdown text box.

Hope it helps :slight_smile:

Thanks

1 Like
3

Hi Santhosh,

That’s great. Thank you. I wanted to add text and and an icon to each option so had to modify your code slightly as follows. The key was to add the the option-text attribute and use the html-content attribute not the htmlContent property. If the option-text attribute not there then the drop down list empty. I am also using the selected attribute to preselect an option and that works perfectly.

<fw-select label="House Name" required="true" value="1" placeholder="Your choice" state-text="Select singluar option">
  <fw-select-option value="1" selected="true" html html-content option-text="Starks">
     <fw-icon name="add-contact" size="18" color="green"></fw-icon>
     Starks
  </fw-select-option>
  <fw-select-option value="1" html html-content option-text="Lannisters">
    <fw-icon name="add-contact" size="18" color="green"></fw-icon>
    Lannisters
  </fw-select-option>
</fw-select>
4

The above said we do need the fix to be able to change the title on icons :slight_smile:

5

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.