JSF 2 panelGrid column formatting - uniform alignment - css

Question

I have a multi column form that I need to display and I used the JSF panelGrid component like this. each panelgrid is within a primefaces p:panel element
<h:panelGrid columns="6" cellpadding="1" cellspacing="1" style="width: 100%" columnClasses="column1">
my column1 in CSS is:
.column1 {
width: 14%;
}
It renders on screen like image below. Notice the columns within the panels are not aligned and it looks haphazard. How can I align the form elements/labels in a uniform manner and also get rid of the spaces and padding to make the form layout more compact.
Thanks in Advance BaluSC if you answer! You really are the king of JSF:-)

Answer 1

I also have a multi-column form using JSF PanelGrid.
<h:panelGrid id="panelGrid" columns="4" cellpadding="3"
columnClasses="colLeft,colRight,colLeft,colRight">
<p:outputLabel for="username" value="Username" />
<p:inputText id="username" value="#{myBean.user.username}"
required="true" />
<p:outputLabel for="fullName" value="Full Name" />
<p:inputText id="fullName" value="#{myBean.user.fullName}"
required="true" />
<p:outputLabel for="password" value="Password" />
<p:password id="password" value="#{myBean.user.password}"
required="true" match="passConfirm" />
<p:outputLabel for="passConfirm"
value="Re-type Password" />
<p:password id="passConfirm" value="#{myBean.user.password}"
required="true" />
</h:panelGrid>
Here is CSS.
#panelGrid {
width: 100%;
}
.colLeft {
width: 15%;
}
.colRight {
width: 35%;
}
Here is output.
Hope it works!