CODEWITHSUNDEEP
cssjsfprimefacesiconsfieldset
vissu
vissu

Reputation: 61

How to customize expand and collapse icons of p:fieldset

How can I change expand and collapse icons of PrimeFaces 5.2 <p:fieldset> to my own icons?

Upvotes: 1

Views: 2835

Answers (1)

Sva.Mu
Sva.Mu

Reputation: 1131

Defining the following styles worked for me:

.ui-fieldset .ui-fieldset-toggler.ui-icon-plusthick {
    background-image: url("#{resource['img/plus.png']}");
    background-position: left top;
}

.ui-fieldset .ui-fieldset-toggler.ui-icon-minusthick {
    background-image: url("#{resource['img/minus.png']}");
    background-position: left top;
}

This example assumes you have images named plus.png and minus.png in your resources/img folder.

Note that this actually overrides the default PrimeFaces styles and will most likely affect the whole application. If you need to change this on some form only, you will have to define a custom class to be placed in the styleClass attribute of your p:fieldSet and to modify the above listed styles accordingly.

So the "special" case could look similar to this:

<p:fieldset styleClass="my-custom-fieldset" ...

And the related styles would be re-defined like this:

.ui-fieldset.my-custom-fieldset .ui-fieldset-toggler.ui-icon-plusthick {...}
.ui-fieldset.my-custom-fieldset .ui-fieldset-toggler.ui-icon-minusthick {...}

Hope this will send you the right direction.

UPDATE - hover issue

As reported by OP, there may be issues in some browsers - the reason is that PrimeFaces adds class ui-state-hover to the legend node, which may not be processed correctly in some circumstances.

So you may either try to use simple selectors only - these should be applied always:

.ui-fieldset-toggler.ui-icon-plusthick {...}
.ui-fieldset-toggler.ui-icon-minusthick {...}

Or to keep the selectors more verbose, effectively specifying them twice - once for "normal" state and once for the "hover":

.ui-fieldset-legend .ui-fieldset-toggler.ui-icon-plusthick { /* plus */ }
.ui-fieldset-legend.ui-state-hover .ui-fieldset-toggler.ui-icon-plusthick { /* plus */}
.ui-fieldset-legend .ui-fieldset-toggler.ui-icon-minusthick { /* minus */ }
.ui-fieldset-legend.ui-state-hover .ui-fieldset-toggler.ui-icon-minusthick { /* minus */}

As explained in comments, I tested this in multiple browsers and could not reproduce the "hover" issue, so you may need to experiment on your own. All the above listed selector examples worked in my environment.

Upvotes: 2

Related Questions