Discussion :

[DavidleVrai]

Bonjour, je viens solliciter votre aide car je n'arrive pas à placer correctement un bouton.

Je voudrai obtenir la disposition suivante avec (le p:fieldset prend toute la largeur de la page) :

Mais avec ces codes jsf et css je n'obtiens pas le bon résultat :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<p:fieldset legend="Informations" toggleable="true" toggleSpeed="500">
	<h:panelGrid border="0" columns="2" style="width: 100%">
		<h:panelGrid border="0">
			<p:outputLabel>Une ligne de texte...</p:outputLabel>
			<p:outputLabel>Une autre ligne de texte...</p:outputLabel>
			<p:outputLabel>Une troisième ligne de texte...</p:outputLabel>
			<p:outputLabel>Une dernière ligne de texte...</p:outputLabel>
		</h:panelGrid>
 
		<p:commandButton value="un bouton" icon="ui-icon-extlink"
						 id="btn_logout" />
	</h:panelGrid>
</p:fieldset>

Code :

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

1
2
3
4
5
#btn_logout {
    display: block;
    border: 1px red solid;
    margin: 0 0 auto auto;
}

Le résultat obtenu avec ces codes au dessus :

J'ai un peu tout essayé et je ne sais pas ce que je peux faire pour positionner mes éléments correctement.

Cordialement.

[OButterlin]

Ceci par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<p:fieldset style="vertical-align:top">
    <h:panelGrid columns="2" style="float:left">
        <h:outputText value="Text"/>
        <p:inputText/>
        <h:outputText value="Text 2"/>
        <p:inputText/>
    </h:panelGrid>
    <p:commandButton value="Commande"/>
</p:fieldset>

[DavidleVrai]

Merci OButterlin ! J'ai pou adapter ta solution à mon cas et ça marche.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<p:fieldset legend="Informations" toggleable="true" toggleSpeed="500">
	<h:panelGrid border="0" columns="2" columnClasses=",col_btn" style="width: 100%">
		<h:panelGrid border="0">
			<p:outputLabel>Une ligne de texte...</p:outputLabel>
			<p:outputLabel>Une autre ligne de texte...</p:outputLabel>
			<p:outputLabel>Une troisième ligne de texte...</p:outputLabel>
			<p:outputLabel>Une dernière ligne de texte...</p:outputLabel>
		</h:panelGrid>
 
		<p:commandButton value="un bouton" icon="ui-icon-extlink" />
	</h:panelGrid>
</p:fieldset>

Code :

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

1
2
3
4
.col_btn {
    vertical-align: top;
    text-align: right;
}

Par contre je n'ai pas voulu utiliser le float:left pour ne pas faire sortir le panelGrid du flux. Mais est-ce que le vertical-align:top conserve bien les éléments à l'intérieur ?

[OButterlin]

J'avais testé ma solution avant de te la donner, ça fonctionne tel quel... et je n'ai pas besoin d'un deuxième panelGrid
Mais si tu ne veux pas de float, tu as le droit

[DavidleVrai]

Je confirme, ta solution est tout a fait fonctionnelle et m'a permis de trouver la solution. Comme je ne voulais pas utiliser de float j'ai effectivement du utiliser un autre panelGrid.

[OButterlin]

Si tu considères le problème comme étant résolu, pense au bouton