Discussion :

[Népomucène]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)
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.

[jeffray03]

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

[Népomucène]

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 ?

[Népomucène]

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 ...) ?

[jeffray03]

salut ,
je vais voir ca lundi
eric

[Népomucène]

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

[Népomucène]

Retour à la version 3.1 de Primefaces extensions

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

du coup, j'ai fait dans ma CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" ?

[Népomucène]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et dans le xhtml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>