M.G. M.G. - 4 months ago 19
CSS Question

Setting commandButton's width

I am trying to make a contact form which looks like;

+----------------+-------------------+
| Name: | |
+----------------+-------------------+
| Email Address: | |
+----------------+-------------------+
| Website: | |
+----------------+-------------------+
| Comment: | |
+----------------+-------------------+
| Send |
+------------------------------------+


So far I put my labels and texts in grid.
My button looks like this;

...
+----------------+-------------------+
| Comment: | |
+----------------+-------------------+
| Send |
+------+


But I want it to looks like the first one, centered and aligned with other components' width.

<p:panelGrid columns="2">
<h:outputLabel value="Name:" />
<p:inputText value="#{contactFormController.name}" required="true" />

<h:outputLabel value="Email Address:" />
<p:inputText value="#{contactFormController.email}" required="true" />

<h:outputLabel value="Website:" />
<p:inputText value="#{contactFormController.website}" required="false" />

<h:outputText value="Comment:" />
<p:inputText value="#{contactFormController.comment}" required="true" />

<p:commandButton value="Send" actionListener="#{contactFormController.sentMail}"/>
</p:panelGrid>

Answer

Try something like:

<p:panelGrid>
    <p:row>
        <p:column>
            <h:outputLabel value="Name:" />
        </p:column>
        <p:column>
            <p:inputText value="#{contactFormController.name}" required="true" />
        </p:column>
    </p:row>

//other columns here

    <p:row colspan="2" >
        <p:commandButton value="Send" actionListener="#{contactFormController.sentMail}"/>
    <p:row>
</p:panelGrid>
Comments