Home/ Questions/Q 5838455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T11:28:11+00:00

Just a basic need but cannot get it to work. I would like to

  • 0

Just a basic need but cannot get it to work.
I would like to have a primefaces button to display my image, without any text.

But what i get is a button that contains only a ^ character and does NOT displaying the image, which only has a size of 16×16.

So, this is the primefaces button :

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
    <p:dataExporter type="csv" target="gridRPBDetails" 
        fileName="#{tInputBean.exportFilename}" />
</p:commandButton>

This is the css file :

.ui-icon-csv {
    background-image: url(images/csv_small.png);
}

And this is the generated html for the button :

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    role="button" aria-disabled="false">
        <span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span>
</button>

And to prove the image accessible, i try this URL, and indeed it shows the picture :

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png

Im using tomcat 7, and these are my dependencies :

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>2.2.1</version>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>

Any ideas what went wrong ?

Thank you !

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After some investigation using firebug, i found out that the culprit is from the CSS stuff i defined.

    So these are the changes i made to make this work.

    The JSF button :

    <p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false">
    <p:dataExporter type="xls" target="gridRPBDetails" 
        fileName="#{tInputBean.exportFilename}" />
</p:commandButton>

    The CSS :

    .ui-state-default .ui-icon-xls {
    background-image: url(images/excel_small.png);
}

    And here is the generated html :

    <button type="submit" title="Excel Document" onclick=";" 
  name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
  role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-xls"></span>
    <span class="ui-button-text">ui-button</span>
</button>

    Thank you !

    • 0