Customize the text of the PickList buttons of PrimeFaces

Question

I would like to know if anyone who has faced this has been able to change the text of the buttons of a picklist. Sometimes due to accessibility problems we may need change it for do this requirement.

The selection buttons of a picklist appear with icons but in the primefaces documentation I don't see how they can be changed text or if it is not possible.

[Updated: I am using Primefaces version 6.2 ]

Answer 1

You can simply use the labelDisplay="inline" property.

<p:pickList ...
            labelDisplay="inline"/>

This will use the default properties of a supported language. See for example the English properties .

You can customize the labels like:

<p:pickList ...
            addLabel="Voeg toe"
            addAllLabel="Voeg alles toe"
            removeLabel="Verwijder"
            removeAllLabel="Verwijder alles"
            labelDisplay="inline"/>

or override the properties. See

• https://github.com/primefaces/primefaces/tree/master/primefaces/src/main/resources/org/primefaces

See also:

• https://primefaces.github.io/primefaces/10_0_0/#/components/picklist

Answer 2

I have faced the same, and my solution was as follows:

Using css stylesheet you can change the content with the content:'yourText' property. Then you just have to disable with the display:none property the background image of the icon that is in one of the button's span tags. And add the text in each button with the content property.

The interesting thing would be to be able to prepare it for multilanguage. I think that through javascript it could be done.

I leave the example with the solution using the Primefaces web showcase.

.ui-picklist-buttons .ui-button-text.ui-c {
    display: none !important;
}
.ui-picklist-buttons .ui-button-icon-left {
    display: none !important;
}
.ui-picklist-button-add::after {
    content: 'Add';
}
.ui-picklist-button-add-all::after {
    content: 'Add all';
}
.ui-picklist-button-remove::after {
    content: 'Remove';
}
.ui-picklist-button-remove-all::after {
    content: 'Remove all';
}

Note: I also increased the width of the buttons to make them look good in the image, although I have not included it in the capture or in the css code.