[PrimeFaces] inputText au format monétaire

Bonjour,

J'essaye de faire une simple zone de saisie au format monétaire.

Code:

---

1 2 3

<p:inputText id="montant" value="#{clientsManager.clientEnCours.montant}" style="text-align:right;width:150px;"> <f:convertNumber pattern="#,##0.00 €"/> </p:inputText>

---

Mais ça n'est pas pratique car il faut taper le nombre exactement comme le pattern l'a prévu avec les décimales, l'espace des milliers et le symbole monétaire (€)
Ex : Si un utilisateur doit saisir la somme de 1200 euros, je ne me vois pas lui dire de taper intégralement 1 200,00 € alors que dans Excel il tape 1200.

J'ai regardé du côté de PrimeFaces extension un composant inputNumber qui marche bien :

Code:

---

1 2 3 4 5 6 7 8 9

<pe:inputNumber id="montant" value="#{clientsManager.clientEnCours.montant}" symbol=" €" symbolPosition="s" decimalSeparator="," thousandSeparator="." style="text-align:right;width:80px;"> </pe:inputNumber>

---

Je peux taper 1200 et il me restitue bien 1 200,00 €
Mais impossible d'aligner les chiffres sur la gauche : text-align:right ne marche pas (pas plus que le reste du style) :aie:
Et bien entendu dans une grille de montants à saisir, ça sera inutilisable !

Quelqu'un saurait-il me dire ce que je fais de travers ?

Merci d'avance pour votre aide.

Salut,
ton code chez moi , marche tres bien, l´alignement est bien a droite.
Eric

bonjour jeffray03

le pe:inputNumber s'aligne bien à droite chez toi ?

c'est peut-être un problème de version.
j'ai :

primefaces-5.2
primefaces-extensions-3.1.0

aurais-tu une version antérieure qui fonctionne ?

Bon ben ... c'était bien un problème de version.

J'ai remplacé primefaces-extensions-3.1.0 par primefaces-extensions-2.0.0 (régression à plusieurs versions précédentes) et ça marche, les chiffres s'alignent bien à droite.

Maintenant, je ne suis pas satisfait de cette solution de dépannage car j'imagine ne pas être le seul à avoir besoin que les chiffres s'alignent à droite.

Du coup, est-ce que quelqu'un saurait comment on fait avec la nouvelle version de primefaces-extensions-3.1.0 pour indiquer un style (alignement, fonte, marges ...) ?

salut ,
je vais voir ca lundi
eric

Merci Eric !
Naturellement, je continue à chercher aussi de mon côté.

Retour à la version 3.1 de Primefaces extensions

J'ai fait une feuille de style CSS dans les règles :

Code:

---

1 2 3

#montant { text-align: right; }

---

en me disant que mon InputNumber avec id="montant" allait s'aligner à droite respectant la norme CSS...
... en bien pas du tout ! ces gens-là ne respectent rien ma bonne dame, même pas la norme CSS !

Du coup, avec FireFox, j'ai cliqué sur "Examiner l'élément" (c'est bien ce truc !) et c'est assez instructif.
Je vois que la déclaration class est :

Code:

---

class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all pe-inputNumber"

---

du coup, j'ai fait dans ma CSS :

Code:

---

1 2 3

.pe-inputNumber { text-align: right; }

---

Et là ça marche, tous mes InputNumber sont alignés à droite !
Franchement, pour la saisie des nombres, cela aurait dû être l'alignement par défaut.

Le sujet est-il résolu ? non pas encore car je vais chipoter un peu :
Au milieu des toutes mes zones en €uros, j'ai une zone de saisie en pourcentage et je voudrais que celle-ci soit centrée !

Code:

---

1 2 3 4 5 6 7 8 9 10

<pe:inputNumber id="tauxDeTva" value="#{simpleManagedBean.dataModel.tauxDeTva}" symbol=" %" symbolPosition="s" decimalSeparator="," emptyValue="zero" decimalPlaces="2" > </pe:inputNumber>

---

FireFox me dit que tauxDeTva est vu comme : #monFormulaire\:tauxDeTva_input
Donc dans ma CSS je fait :

Code:

---

1 2 3

#monFormulaire\:tauxDeTva_input { text-align: center; }

---

Et bien sûr, ça ne marche pas : le pourcentage n'est pas centré.
Il est aligné à droite car c'est le sélecteur .pe-inputNumber qui a prit la main.

quelqu'un aurait-il une idée pour centrer un pourcentage "inputNumber" ?

Au cas où quelqu'un serait dans le même cas, dans la CSS il faut faire :

Code:

---

1 2 3

.maClassePourcentage .pe-inputNumber { text-align: center; }

---

et dans le xhtml :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<pe:inputNumber id="tauxDeTva" value="#{simpleManagedBean.dataModel.tauxDeTva}" symbol=" %" symbolPosition="s" decimalSeparator="," emptyValue="zero" decimalPlaces="2" class="maClassePourcentage" > </pe:inputNumber>

---