web-dev-qa-db-fra.com

Comment aligner des éléments dans un <h: panelGrid> à droite

Comment pourrais-je aligner tout en bas à l'extrême droite?

<div id="container">    
     <h:form id="authenticate">
        <h:panelGrid columns="5" cellpadding="6">
             <h:inputText id="email" value="" />
             <p:watermark for="email" value="Email"/>
             <h:inputSecret id="password" value="" />
             <p:watermark for="password" value="Password"/>
             <p:commandButton id="login" value="Login" align="right"/>
        </h:panelGrid>
     </h:form>
</div>
cssjsf
12
curiousgeorge

Le <h:panelGrid> rend un tableau HTML. Vous voulez fondamentalement appliquer text-align: right; sur chaque élément <td> rendu. Avec le code actuel, le plus simple serait d'appliquer ce qui suit:

#authenticate table td {
    text-align: right;
}

Vous pouvez bien sûr aussi être plus spécifique, par exemple en attribuant au <h:panelGrid> sa propre styleClass et en définissant une règle en CSS (qui serait appliquée directement à l'élément HTML <table> rendu).

<h:panelGrid styleClass="className">

avec

.className td {
    text-align: right;
}

Vous pouvez également attribuer à chaque élément <td> sa propre classe par l'attribut columnClasses, qui accepte une chaîne de noms de classe CSS séparés par des virgules, à appliquer de manière répétée sur les éléments <td>. Si vous souhaitez appliquer la même classe à chaque élément <td>, indiquez-le une seule fois:

<h:panelGrid columnClasses="className">

avec

.className {
    text-align: right;
}

Astuce supplémentaire: cliquez avec le bouton droit sur la page Web dans le navigateur Web et choisissez Voir la source, vous comprendrez mieux ce que JSF génère exactement.

25
BalusC

effectivement sous la même forme, j'ai utilisé <p:panel> et obtenu un bon résultat. ressemble à ;

<p:panel  styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
    <p:commandButton value="Add New Tab"
            actionListener="#{xxx.createNewTab}" process="@this"
            update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
            </p:panel>
5
newuserua

Un peu tard, mais pourrait aider quelqu'un, car c'était ce dont j'avais besoin ...

Si l'alignement ne se limite pas à ce tableau spécifique, mais au format par défaut de toutes les cellules du tableau, ajoutez simplement ceci à votre fichier CSS:

td {
    text-align: right;
}

Tous les éléments <td>, y compris ceux générés par JSF, seront ensuite formatés de cette façon.

0
neizan