2010-09-15 4 views
12

Comment est-ce que j'alignerais tout dans mon ci-dessous à l'extrême droite?Comment aligner des éléments dans un <h:panelGrid> vers la 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> 

Répondre

25

Le <h:panelGrid> rend une table HTML. Vous voulez essentiellement appliquer text-align: right; sur chaque élément <td> qu'il rend. Avec le code actuel, le plus simple serait d'appliquer les éléments suivants:

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

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

<h:panelGrid styleClass="className"> 

avec

.className td { 
    text-align: right; 
} 

Vous pouvez également donner à chaque élément <td> sa propre classe par columnClasses attribut qui accepte une chaîne commaseparated de classnames CSS qui doivent être appliquées de façon répétée sur les <td> éléments. Si vous voulez appliquer la même classe sur chaque élément <td>, il suffit de spécifier une fois:

<h:panelGrid columnClasses="className"> 

avec

.className { 
    text-align: right; 
} 

Comme un indice supplémentaire: rightclick la page Web dans webbrowser et choisissez Voir Source, alors vous comprendrez mieux ce que JSF génère exactement.

+0

Remarque: Pour columnClasses, elles s'appliquent aux colonnes _rendered_ et non à toutes les colonnes répertoriées. Pour Mojarra 2.0, il s'agit de la méthode _only_ pour définir n'importe quel attribut sur l'élément td généré. –

+0

Vous améliorez souvent les 'anciens' posts pour qu'ils soient plus génériques, plus faciles à trouver, etc ... Est-ce que c'est aussi un élément éligible, voir http://stackoverflow.com/questions/30136972/how-to-specify-styles-for-hpanelgrid -in-jsf – Kukeltje

5

effectivement sous la même forme j'ai utilisé <p:panel> et j'ai 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> 
0

Un peu plus tard, mais pourrait aider quelqu'un, comme il était ce que je devais ...

Si l'alignement ne se limite pas à cette table spécifique, mais plutôt le format par défaut pour toutes les cellules de table, puis juste ajouter à votre fichier CSS:

td { 
    text-align: right; 
} 

ensuite, tous <td> éléments, y compris ceux générés par JSF, seront mis en forme de cette façon.

Questions connexes