primefaces panelgrid colspan not working - jsf

Question

I'm trying to set a panelgrid inside a dialog. Everything seems to be working except the colspan. I've check this post PrimeFaces panelGrid but its year and half old. From the primefaces manual and showcase, colspan should be accepted by datatable and panelGrid.
<h:form id="idFormAddDialog">
<p:panelGrid id="idPanelAddUsers" columns="2">
<h:outputLabel for="dAddOutUser" value="Username:"></h:outputLabel>
<h:inputText id="dAddOutUser" value="#{userController.username}"></h:inputText>
<h:outputLabel for="dSelRole" value="Role:"></h:outputLabel>
<h:selectOneMenu id="dSelRole" value="#{userController.role}">
<f:selectItem itemLabel="Admin" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Researcher" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="User" itemValue="3"></f:selectItem>
</h:selectOneMenu>
<h:outputLabel for="dAddINPassword1" value="Password: "></h:outputLabel>
<p:password id="dAddINPassword1" value="#{userController.password}" feedback="true"></p:password>
<p:row>
<p:column colspan="2">
<p:separator></p:separator>
<!-- <p:separator></p:separator>-->
</p:column>
</p:row>
<p:commandButton value="OK" actionListener="#{userController.addUser()}" ></p:commandButton>
<p:button value="Cancel"></p:button>
</p:panelGrid>
</h:form>
But I'm not able to find what I'm doing wrong.

Answer 1

First, if you want to use p:row and p:column in p:panelGrid remove columns attribute, and manage rows and column manually with p:row and p:column tags. Everything inside p:panelGrid must be inside p:row tags. Example:
<p:panelGrid id="idPanelAddUsers">
<p:row>
<p:column></p:column>
<p:column></p:column>
<p:column></p:column>
</p:row>
<p:row>
<p:column colspan="2"></p:column>
<p:column></p:column>
</p:row>
</p:panelGrid>