Question

以前在<table>表单中使用JSF标记。我注意到最好使用panelGrid标记代替它，因为它更容易使用和更简单。

之前，我为<td>标记使用了额外的<h:message >，并将其宽度设置为300，以防止在消息出现时表单向左移动。

现在，我正在使用width标记的<h:panelGrid>属性，但这不是我的愿望。

当出现任何错误消息时，整个表单向左移动，然后消息显示在每个input text的前面。

我使用width标记的message属性，但效果不佳。

我是否应该返回使用<table>代替<h:panedGrid>？

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet gg</title>
    </h:head>
    <h:body>
        <center>
            <h:form>
                <h:panelGrid columns="3" width="400">
                    <h:outputLabel value="Username:"/>
                    <h:inputText id="username" value="#{loginBean.username}" required="true">
                        <f:validateLength maximum="30" minimum="3"/>
                    </h:inputText>
                    <h:message for="username" />
                    <h:commandButton value="submit" action="home"/>
                </h:panelGrid>
            </h:form>
        </center>
    </h:body>
</html>

Answer 1

这是正常行为，因为width的{{1}}属性适用于整个表格，而不适用于特定列，您可以检查其中的h:panelGrid width columnClasses }}

但是，您可以通过使用属性style.css为列定义CSS类来为每列指定css：

将应用于的CSS样式类的逗号分隔列表这个表的列。空格分隔的类列表也可以是为任何单个列指定。如果这个元素的数量 list小于UIData的实际列子节点数，不＃34;班＆＃34;为每列大于该数字输出属性列表中的元素。如果列表中的元素数量是大于UIData的实际列子节点数最后一列之后的列表中位置的元素忽略。

因此，在您的示例中，假设您的.firstColumn { width: 100px; } .secondColumn { width: 100px; } .thirdColumn { width: 300px; }库中有<h:outputStylesheet library="css" name="styles.css"/>个文件，您可以在其中添加以下内容：

h:panelGrid

使用以下内容包含您的css文件后

<h:panelGrid columns="3" columnClasses="firstColumn,secondColumn,thirdColumn ">
    <h:outputLabel value="Username:"/>
    <h:inputText id="username" value="#{loginBean.username}" required="true">
           <f:validateLength maximum="30" minimum="3"/>
    </h:inputText>
    <h:message for="username" />
    <h:commandButton value="submit" action="home"/>
</h:panelGrid>

您可以在{{1}}中使用它，如下所示：

{{1}}

指定h：panelGrid列的宽度

1 个答案: