Question

Strange issue, I have read through various posts, but have yet to find a working answer.

When I have a h:commandButton, where I want an icon to display instead of text, I have tried.

<h:commandButton value=" " image="UpArrow.png" style="position: absolute; left: 36px; top: 17px; width: 18px; height: 18px; cursor: pointer;" title="Pan up" actionListener="#{SarWindsImagesBean.panUp('testImage.jpg')}">
    <f:ajax  render="imagePan2"/>
</h:commandButton>

<h:commandButton image="UpArrow.png" style="position: absolute; left: 36px; top: 17px; width: 18px; height: 18px; cursor: pointer;" title="Pan up" actionListener="#{SarWindsImagesBean.panUp('testImage.jpg')}">
    <f:ajax  render="imagePan2"/>
</h:commandButton>

In the first, the size is correct, but instead of the image, I get “Submit Query”.
In the second, I get the same problem.

Why is it rendering “Submit Query”? and If I add value=” “, it will not display the icon, just an empty box.

Dan

Answer 1

That’s the browser-default value of the HTML <input type="submit"> element when the value attribute is omitted. This is not generated by JSF. Try it out yourself with such a HTML element in a plain HTML page.

As to why adding the value attribute when the image attribute is present results in an empty box, that’s likely MyFaces specific. I can’t reproduce it in Mojarra.

As to (ab)using the image attribute in order to present a background image, this after all not entirely right. You should be using CSS background-image property instead,

<h:commandButton value=" " style="background-image: url(UpArrow.png)" />

or just a <h:commandLink><h:graphicImage> if you don’t want to have the appearance of a button at all:

<h:commandLink ...>
    <h:graphicImage value="UpArrow.png" />
</h:commandLink>