Star rating in Dropdown

Question

I would like to do a simple star rating in a dropdown on an XPage. There seems to be a problem with the codepage or something similar. In Designer everything looks OK (except that the stars are b/w in Designer) but I get ?? in the dropdown. If I am doing things TOTALLY incorrectly I do not mind using something else (eg. ExtLib)

here is the code

<xp:comboBox id="comboBox1" value="#{viewScope.mon_bewertung}"> 
   <xp:selectItem itemLabel=" " itemValue="0"></xp:selectItem>
   <xp:selectItem itemLabel="1 " itemValue="1"></xp:selectItem> 
   <xp:selectItem itemLabel="2 " itemValue="2"></xp:selectItem> 
   <xp:selectItem itemLabel="3 " itemValue="3"></xp:selectItem> 
   <xp:selectItem itemLabel="4 " itemValue="4"></xp:selectItem> 
   <xp:selectItem itemLabel="5 " itemValue="5"></xp:selectItem> 
</xp:comboBox>

Thanking you in advance Ursus

A hint may be found here : http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list — umeli, Mar 21 '17 at 12:45

score 0 · Accepted Answer · edited May 23 '17 at 12:25

In a xp:selectItem it isn't possible to reference an image.

Item Label ‏(itemLabel) Specifies the text displayed for the selection item to the user

You could try to add background images to your xp:comboBox selection list as mentioned above:

How to add a images in select list

Another option would be to try something similar to the following example:

http://plugins.krajee.com/star-rating-demo-theme-fa

<input id="input-1-ltr-star-xs" name="input-1-ltr-star-xs" class="kv-ltr-theme-fa-star rating-loading" value="1" dir="ltr" data-size="xs">
<br/>
<input id="input-2-ltr-star-sm" name="input-2-ltr-star-sm" class="kv-ltr-theme-fa-star rating-loading" value="2" dir="ltr" data-size="sm">
<br/>
<input id="input-3-ltr-star-md" name="input-3-ltr-star-md" class="kv-ltr-theme-fa-star rating-loading" value="3" dir="ltr" data-size="md">
<br/>
<input id="input-4-ltr-star-lg" name="input-4-ltr-star-lg" class="kv-ltr-theme-fa-star rating-loading" value="4" dir="ltr" data-size="lg">
<br/>
<input id="input-5-ltr-star-xl" name="input-5-ltr-star-xl" class="kv-ltr-theme-fa-star rating-loading" value="5" dir="ltr" data-size="xl">
<br/>

<script>
$(document).on('ready', function(){
    $('.kv-ltr-theme-fa-star').rating({
        hoverOnClear: false,
        theme: 'krajee-fa'
    });
});
</script>

For implementing the above example you could use e.g. xpages xp:inputText core controls...

Star rating in Dropdown

1 Answers1