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.
>Solution :
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.
