jsf对齐panelgrid中的复选框答案

【问题标题】：jsf align checkboxes in panelgridjsf对齐panelgrid中的复选框
【发布时间】：2014-10-04 13:38:11
【问题描述】：

您好，我有一个用 panelgrid 呈现的表单，它有 3 列，如下所示：

Label-InputField-ErrorMessage

我想添加一些复选框，但对齐有问题。

    <h:panelGrid columns="3">
            <h:outputText value="Όνομα:"></h:outputText>
            <h:inputText id="name" value="#{regBean.name}" required="true"
                requiredMessage="Παρακαλώ εισάγετε όνομα!"
            >
                <f:validator validatorId="nameValidator" />
            </h:inputText>
            <h:message id="namemsg" for="name" style="color:red"></h:message>

            <h:outputText value="Επώνυμο:"></h:outputText>
            <h:inputText id="surname" value="#{regBean.surname}" required="true"
                requiredMessage="Παρακαλώ εισάγετε επώνυμο"
            >
                <f:validator validatorId="nameValidator" />
            </h:inputText>
            <h:message for="surname" style="color:red"></h:message>
<h:outputText value="Ενδιφέρομαι για"></h:outputText>
            <h:selectManyCheckbox>

                <f:selectItem itemValue="1" itemLabel="Number1 - 1" />
                <f:selectItem itemValue="2" itemLabel="Number1 - 2" />

                <f:selectItem itemValue="3" itemLabel="Number1 - 3" />
                <f:selectItem itemValue="4" itemLabel="Number1 - 4" />

            </h:selectManyCheckbox>

            <h:commandButton type="submit" value="Submit"></h:commandButton>
            <h:commandButton type="reset" value="Reset"></h:commandButton>
</h:panelGrid>

没有选择框：

这是我添加它们时得到的：

我想要这样的东西：

我尝试在 h:panelGrid 中添加 html 标签，但失败了。有没有办法只用css/html/jsf来实现？

提前谢谢

【问题讨论】：

标签： html css jsf

【解决方案1】：

这比我想象的要容易。我必须在<h:selectManyCheckbox> 处添加layout="pageDirection" 并将选择包装在panelGroup 中

固定代码：

<h:outputText value="Ενδιαφέρομαι για"></h:outputText>
        <h:panelGroup layout="block">
            <h:selectManyCheckbox layout="pageDirection">
                <f:selectItem itemValue="1" itemLabel="Item 1" />
                <f:selectItem itemValue="2" itemLabel="Item 2" />
                <f:selectItem itemValue="3" itemLabel="Item 3" />
                <f:selectItem itemValue="4" itemLabel="Item 4" />
            </h:selectManyCheckbox>
        </h:panelGroup>

【讨论】：