指定列宽 h:panelGrid

Question

以前在 JSF 表单中使用 <table> 标签。我注意到最好使用 panelGrid 标签而不是它，因为它更易于使用且更简单。

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

现在，我正在使用 <h:panelGrid> 标签的 width 属性，但这不是我想要的。

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

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

我是否必须返回使用 <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

这是正常行为，因为 h:panelGrid 的 width 属性适用于整个 table 而不是特定列，您可以在 java docs 中检查.

但是，您可以通过使用属性 columnClasses:

为列定义 CSS 类来为每个列指定一个 width

Comma-delimited list of CSS style classes that will be applied to the columns of this table. A space separated list of classes may also be specified for any individual column. If the number of elements in this list is less than the number of actual column children of the UIData, no "class" attribute is output for each column greater than the number of elements in the list. If the number of elements in the list is greater than the number of actual column children of the UIData, the elements at the posisiton in the list after the last column are ignored.

因此，在您的示例中，假设您的 css 库中有一个 style.css 文件，您可以向其中添加如下内容：

  .firstColumn {
       width: 100px;
  }
  .secondColumn {
       width: 100px;
  }
  .thirdColumn { 
       width: 300px;
  }

在包含您的 css 文件后使用：

<h:outputStylesheet library="css" name="styles.css"/>

您可以在 h:panelGrid 中使用它，如下所示：

<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>

指定列宽 h:panelGrid

Specify width of a column of h:panelGrid

html

css

jsf