Primefaces PanelGrid colSpan error

Question

I am trying to divide the body of a page with primefaces so that it is responsive. The problem is that it does not respect the columns that I indicate. I have seen other people who happened to similar things, but I can not find out that it is wrong in my code.

Can anybody help me?

Thank you very much in advance

  <p:panelGrid columns="4" layout="grid" style="width:100%;">
            <p:row>
                <p:column colspan="3">
                    <h:form>
                        cosas muy randomosas que tiene que usar el 75%
                    </h:form>
                </p:column>
                <p:column colspan="1">
                    <p:panelGrid columns="2">
                        <h:outputLabel for="username" value="Username:" />
                        <p:inputText id="username" value="#{userLogin.username}"
                            required="true" label="username" />
                        <h:outputLabel for="password" value="Password:" />
                        <p:password id="password" value="#{userLogin.password}"
                            required="true" label="password" />

                        <f:facet name="footer">
                            <p:commandButton value="Login" actionListener="#{userLogin.login}" />
                        </f:facet>
                    </p:panelGrid>
                </p:column>
            </p:row>
        </p:panelGrid>

Answer 1

You cannot use colspan in a p:panelGrid with layout="grid".
As stated in Primefaces manual about Rowspan and Colspan:

• Note that this approach does not support grid layout.

To achieve what you want, you should:

1. set columns="2"
2. remove p:row and colspan
3. add columnClasses="ui-grid-col-9,ui-grid-col-3"

You code should look something like this:

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-9,ui-grid-col-3">
    <p:column>
       <cosas muy randomosas que tiene que usar el 75%
    </p:column>
    <p:column>
        <p:panelGrid columns="2">
            <h:outputLabel for="username" value="Username:" />
            <p:inputText id="username" value="#{userLogin.username}"
                required="true" label="username" />
            <h:outputLabel for="password" value="Password:" />
            <p:password id="password" value="#{userLogin.password}"
                required="true" label="password" />

            <f:facet name="footer">
                <p:commandButton value="Login"
                    actionListener="#{userLogin.login}" />
            </f:facet>
        </p:panelGrid>
    </p:column>
</p:panelGrid>

columnClasses="ui-grid-col-9,ui-grid-col-3" will cause your columns to have 75% and 25% width.
You can check Primefaces showcase about Responsive Design and Grid CSS

Hope this helps.

Side question: is this panelGrid inside a h:form? If yes, I think you can remove h:form inside your first p:column.