CODEWITHSUNDEEP
cssjsffacelets
Ravi S
Ravi S

Reputation: 331

JSF 2 panelGrid column formatting - uniform alignment

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.

panelGrid layout

Thanks in Advance BaluSC if you answer! You really are the king of JSF:-)

Upvotes: 0

Views: 2821

Answers (1)

Thiha Maung
Thiha Maung

Reputation: 171

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.

enter image description here

Hope it works!

Upvotes: 1

Related Questions