Primefaces spinner - How to change width

Question

If i change the Spinner width like below only the up/down arrow place is changed-the text area remains as default, how do i change the size of the spinner -including the text area.

<p:spinner id="spinnerBasic" style="width:50px;"/> 

Answer 1

The Primefaces spinner is a compound component consisting of a text field and the control elements. All this will be rendered inside a <span>.

If you only want to change the size of the text input, the p:spinner has a size attribute:

<p:spinner id="spinnerBasic" size="20"..../>

From the primefaces documentation:

size: Number of characters used to determine the width of the input element.

The corresponding css class is ui-spinner-input. Changing the width attribute of this class to get the desired changes.