how to add image on left and text on right to commandbutton

[sarathmavilla]

Hi,
Actually i am already having an image strip for my background color, so along with that image i need another image to be added in the left.
such that it should look like a background color blue and the image at the left and the text at the right, all together for a single command button
(i.e)exactly like your fileupload add button.

Please Reply,

Thanks in advance,
Sarath

[rhancke]

sarathmavilla,

Try this style as an example:

.button
{
 color: #000000;
 text-align: center;
 padding-left: 15px;
 width: 80px;
 background: blue url("image.gif") 0 no-repeat;
}

<a4j:commandButton value="click me" action="#{bean.action}" styleClass="button" />

"sarathmavilla" wrote:
Hi,
Actually i am already having an image strip for my background color, so along with that image i need another image to be added in the left.
such that it should look like a background color blue and the image at the left and the text at the right, all together for a single command button
(i.e)exactly like your fileupload add button.

Please Reply,

Thanks in advance,
Sarath

[elf]

Loks like it is working only when org.richfaces.CONTROL_SKINNING is disable.
Are there any workaround for this ?

[ilya_shaikovsky]

which RF version you using if the workaround above not works?

[elf]

I use 3.3.1 RF.
Workaround above works only when in web.xml org.richfaces.CONTROL_SKINNING variable set to disable, but in this case button have defult (ugly) face.
Is there way to use skinned button face (org.richfaces.CONTROL_SKINNING variable set to enable) and image in background?

[ilya_shaikovsky]

 input[type=button]
 {
 color: #000000;
 text-align: center;
 padding-left: 15px;
 width: 80px;
 background: blue url("#{facesContext.externalContext.requestContextPath}/images/icons/delete.gif") 0 no-repeat;
 }

works fine for me.

[ilya_shaikovsky]

I mean even if standard skinning turned on.

[elf]

Ilya, I tried to use input[type=submit] and it works for me, but I have the same image for ALL my buttons. How I can use particular image for every button ?
I tried to create my css class and attach it to particular button (setStyleClass method), but it does not work.

[ilya_shaikovsky]

Ok.. try to add !important to the css background property.

[elf]

Thank you, Sir. It works now fine for me.