指定 h:panelGrid 列的宽度答案

【问题标题】：Specify width of a column of h:panelGrid指定 h:panelGrid 列的宽度
【发布时间】：2015-04-23 05:52:46
【问题描述】：

以前在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>

【问题讨论】：

<center> 标签很久以前就被弃用了。坚持使用 CSS 代替 margin: 0 auto;、margin-left: auto;、margin-right: auto;。
@Tiny 我在名为 .makeCenter 的 css 文件中创建了此设置，并通过类属性将其添加到 form 标签，如下所示：<h:form id="loginForm" class="makeCenter">，但没有用！
.makeCenter{ margin: 0 auto; margin-left: auto; margin-right: auto; }
我之前评论中的那些只是一些列表。他们不应该直接工作。 "auto 被一些合适的值替换，例如它可以用于块的居中。div { width:50%; margin:0 auto; } 水平居中 div 容器。" See.

标签： html css jsf

【解决方案1】：

这是正常行为，因为h:panelGrid 的width 属性是针对整个表而不是针对特定列的，您可以在java docs 中进行检查。

但是，您可以通过使用属性 columnClasses 为列定义 CSS 类来为每列指定一个 width：

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

因此，在您的示例中，假设您的 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>

【讨论】：