with images

Question

I'm using JSF with Primefaces, I want to use a buttonset of radiobutton with only images but I can't make it work.

Here's the code:

    <p:selectOneButton value="#{LoginBean.user}" >  
        <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg1.png?ln=img&quot;/&gt;" itemValue="1"/>
        <f:selectItem itemLabel="&lt;img src=&quot;/myApp/faces/javax.faces.resource/myImg2.png?ln=img&quot;/&gt;" itemValue="2"/>
    </p:selectOneButton>

I tried escaping characters with "escape", "escapeItem" and even "itemEscaped" attributes. I read about the last one in this other question. The solution in that question uses <h:selectOneRadio>, not <p:selectOneButton>.

Note: I know it works using jQueryUI buttonset() method (Primefaces uses it on the background) so it's not a script problem..

So, is it posible to do this with <p:selectOneButton>?

Thanks!

Just an idea... what about nesting the image inside the `` tag? Like `` — SJuan76, Jan 10 '13 at 19:58
@SJuan76 the images render outside of the buttons group, or whatever container you use, and the buttons are all empty because theres no text to fill them (they are `` in the source code) :( — Nefreo, Jan 10 '13 at 20:10

score 6 · Accepted Answer · edited May 23 '17 at 11:52

6

Indeed, the renderer of <p:selectOneButton> doesn't take into account any HTML in labels. Your best bet is to set it as CSS background image instead.

Given a

<p:selectOneButton ... styleClass="buttons">

you can style the individual buttons using CSS3 :nth-child() pseudoselector

.buttons .ui-button:nth-child(1) {
    background: url("#{resource['img/myImg1.png']}") no-repeat;
}
.buttons .ui-button:nth-child(2) {
    background: url("#{resource['img/myImg2.png']}") no-repeat;
}

If you're however targeting browsers which don't support it (certain IE versions), then you can't go around performing the job via JS/jQuery.

$(".buttons .ui-button:eq(0)").css("background", "url('resources/img/myImg1.png') no-repeat");
$(".buttons .ui-button:eq(1)").css("background", "url('resources/img/myImg2.png') no-repeat");

Unrelated to the concrete problem, the way how you're using resource library is not entirely right. Carefully read What is the JSF resource library for and how should it be used? to learn more about it.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 10 '13 at 20:29

BalusC

1,082,665
372
3,610
3,555

I read the post you made a week ago while searching for this and it's great, thanks. I use the library that way in the code just to try to make it work. Regarding the CSS workaround, overriding the background image makes the buttons.. well.. not looking like buttons anymore xD just clickable images. I should stick with jQuery UI buttonset.. maybe? – Nefreo Jan 11 '13 at 12:47
Huh? Isn't that exactly what you want? If you don't want clickable images, what exactly do you want then? – BalusC Jan 11 '13 at 12:51
I want radiobuttons (functionality) with button style (rouded corners, highlight on mousehover, etc) but with images as content instead of text. Overriding CSS I step over the look and feel of `ui-button` and i get flat images :/ – Nefreo Jan 11 '13 at 13:08
I see what you're getting at. Well, I don't think that there's another way than manipulating the HTML DOM using jQuery by inserting the desired `` element in place of button text. – BalusC Jan 11 '13 at 13:16

score 0 · Answer 2 · answered Dec 31 '20 at 22:03

I just wanted to use Font Awesome Icons. That is possible by setting font-family: FontAwesome and using this codes: https://fontawesome.com/v4.7.0/cheatsheet/

<p:selectOneButton value="#{mybean.alignment}" style="font-family: FontAwesome;">
   <f:selectItem itemValue="align-left" itemLabel="&#xf036;"/>
   <f:selectItem itemValue="align-center" itemLabel="&#xf037;"/>
   <f:selectItem itemValue="align-right" itemLabel="&#xf038;"/>
</p:selectOneButton>

with images

2 Answers2

Linked

Related