logo标签列表

指定h:panelGrid列的宽度

htmlcssjsf
4

以前在 JSF 表单中使用的是 <table> 标签。但我注意到使用 panelGrid 标签会更好，因为它更易于使用和更简单。

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

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

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

我尝试使用 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>
2
<center> 标签早已被弃用，请坚持使用 CSS 代替 margin: 0 auto;, margin-left: auto;, margin-right: auto;。 - Tiny
@Tiny 我在CSS文件中创建了名为.makeCenter的设置，并通过class属性将其添加到form标记中，如下所示：<h:form id="loginForm" class="makeCenter">，但是没有起作用！ - user4279433
.makeCenter{ margin: 0 auto; margin-left: auto; margin-right: auto; } - user4279433
我之前的评论只是一些列表，它们不能直接使用。"auto会被替换为适当的值，例如可以用于块的居中。 div { width:50%; margin:0 auto; } 可以将div容器水平居中。" 参见。 - Tiny
1个回答
4
这是正常行为，因为 h:panelGrid 的 width 属性是针对整个表格而不是特定列的。您可以在其Java文档中查看。但是，您可以使用 columnClasses 属性为每个列指定宽度并定义 CSS 类来实现这一点：

逗号分隔的 CSS 样式类列表将应用于此表格的列。也可以为任何单独的列指定以空格分隔的类列表。如果此列表中的元素数量少于 UIData 的实际列子项数，则不会为大于列表中元素数量的每个列输出“class”属性。如果此列表中的元素数量大于 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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接