PrimeFaces p:inputText et p:inputTextarea rendu trop large dans un p:panelGrid forme

J'ai remarqué que sur nos formulaires les champs de saisie p:inputText et p:inputTextarea sont rendus trop large par rapport à d'autres widgets, par exemple p:select* ou p:commandButton. L'un de nos formulaires sont clos par un p:panelGrid.

Voici une page de test:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>
            D E B U G
        </title>
    </h:head>

    <h:body>

        <h:form>

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 100%;" />

                <h:outputText />
                <p:commandButton value="all = width: 100%" style="width: 100%;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 100%;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 100%;" />

            </p:panelGrid>

            <br />

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 300px;" />

                <h:outputText />
                <p:commandButton value="all = width: 300px" style="width: 300px;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 300px;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 300px;" />

            </p:panelGrid>
        </h:form>        

    </h:body>

</html>

Ça ressemble à ça sur Firefox:

PrimeFaces p:inputText et p:inputTextarea rendu trop large dans un p:panelGrid forme

Ça ressemble à ça sur internet explorer 9 (IE 8) de mode:

PrimeFaces p:inputText et p:inputTextarea rendu trop large dans un p:panelGrid forme

Pour le pourcentage des largeurs de <p:inputText style="width: 100%;" />
, les composants sont rendus un peu trop large. Le même semble s'appliquent pour l'absolu largeurs <p:inputText style="width: 300px;" />.

J'ai découvert, que le PrimeFaces CSS est livré avec

.ui-inputfield {
    font-weight: normal;
    margin: 0;
    outline: medium none;
    padding: 4px;
}

où retirer le rembourrage des résultats dans la bonne largeur. Cependant, le rembourrage est destiné à l'encart de texte des entrées. Écrasez le sélecteur CSS ne fonctionne pas vraiment.

Qs:

Comment fixer les p:inputText et p:inputText? Comment ajuster au mieux pour cela? En utilisant une mesure PrimeFaces moteur de rendu?

Addendum:

J'ai regardé dans les sources, mais je ne pouvais pas trouver l'endroit où cela pourrait être changé (InputRenderer classe?). Des conseils sur où trouver sont appréciés (dans un commentaire!).

Noter que le p:calendar composant semble montrer la bonne taille (seulement pour le pourcentage de largeurs cependant). PrimeFaces semble avoir des problèmes ici.

OriginalL'auteur Kawu | 2013-01-10

  1. 1

    C'est un comportement normal, vous avez trouvé déjà pourquoi. En raison de rembourrage dans le thème que vous avez choisi.

    De sorte que vous pouvez:

    • s'adapter à la largeur de vos composants correctement. Utilisation 296px pour inputText ou 304px pour selectOneMenu ou quoi que ce soit qui s'adapte à vos besoins
    • remplacer la feuille de style css pour une section donnée. Il suffit de trouver comment remplacer le style pour une classe donnée dans le contexte donné.
    • la meilleure solution, parce que vous avez des besoins spécifiques: Écrire votre propre thème basé sur le thème actuel (PrimeFaces docu section 7).
    Comment #1-le travail pour le pourcentage de largeurs? Nous sommes déjà à l'aide d'un thème switcher, donc, fondamentalement, à l'aide de notre propre thème personnalisé ne sera pas une solution générale pour tous les autres thèmes.

    OriginalL'auteur Danubian Sailor

  2. 0

    Vous pouvez remplacer le rembourrage et d'autres styles après primefaces de la feuille de style. Habituellement, cela signifie inline /inclure la feuille de style directement après <h:body>:

    .ui-inputfield {
    padding: 0;
}
    vous s'il vous plaît aider, comment changer la couleur de rp:inputText

    OriginalL'auteur Tires