JSF 2 panelGrid 列格式 - 统一对齐答案

【问题标题】：JSF 2 panelGrid column formatting - uniform alignmentJSF 2 panelGrid 列格式 - 统一对齐
【发布时间】：2012-11-29 18:38:55
【问题描述】：

我有一个需要显示的多列表单，我使用了这样的 JSF panelGrid 组件。每个 panelgrid 都在 primefaces p:panel 元素内

<h:panelGrid columns="6" cellpadding="1" cellspacing="1" style="width: 100%"  columnClasses="column1">

我在 CSS 中的 column1 是：

.column1 {
width: 14%;

}

它呈现在屏幕上，如下图所示。注意面板中的列没有对齐，看起来很随意。如何以统一的方式对齐表单元素/标签，同时消除空格和填充以使表单布局更加紧凑。

如果您回答，在此先感谢 BaluSC！你真的是JSF之王:-)

【问题讨论】：

这个问题你解决了吗？遇到同样的情况。
我没有：-(。通过减少填充和文本重新设计了布局

标签： css jsf facelets

【解决方案1】：

我还有一个使用 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>

这里是 CSS。

#panelGrid {
    width: 100%;
}

.colLeft {
    width: 15%;
}

.colRight {
    width: 35%;
}

这是输出。

希望它有效！

【讨论】：