CODEWITHSUNDEEP
jsfprimefacesiconseditor
Tim
Tim

Reputation: 643

Primefaces Change icons from p:rowEditor

i want to change the icons from the <p:rowEditor>. Not the ui-icon-pencil, but the ui-icon-check and ui-icon-close.

My CSS

.ui-icon-check {
    background-image: url(../images/success_icon_16x16.png) !important; 
}
.ui-icon-close {
    background-image: url(../images/cancel.png) !important;
}

But when i edit some row, i see no icon's.

Any idea? Thx Tim

Upvotes: 4

Views: 6268

Answers (2)

Ghada
Ghada

Reputation: 193

I had a similar issue, I could override everything except icons of pencil, check and close. the issue with me was the height and width. So I had to override that.

 .ui-icon-pencil {
  background-image: url(../images/pencil.png) !important;
  height: 20px;
  width:20px;
 }

Upvotes: 0

maple_shaft
maple_shaft

Reputation: 10463

This is likely because your CSS classes are not overriding the jQuery UI css stylesheet. This is because your stylesheet is being placed in the <head> tag before the jQuery UI stylesheet is being declared.

Essentially, jQuery UI stylesheet is overriding your stylesheet.

The easiest way to ensure that your stylesheet overrides other declared styles is to place your stylesheet in the <h:body> instead. Unless there is some attribute on <h:outputStylesheet> that allows you to order how it is rendered in the document compared to other ` objects that is in a newer release of JSF, then this is the only way that I can think of.

Upvotes: 1

Related Questions