Positionner un bouton dans un panel

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

http://img11.hostingpics.net/pics/830453Capture2.png

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

Code:

---

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:

---

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 :

http://img11.hostingpics.net/pics/585160Capture.png

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

Cordialement.

Ceci par exemple

Code:

---

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>

---

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

Code:

---

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:

---

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 ?

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 :aie:

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.

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