html - 为什么 jsf 占用屏幕空间？

Question

在我屏幕上的大多数 primefaces 组件中，我碰巧在我的 xhtml 页面上使用了 h:inputHidden，因为我需要一个隐藏字段来存储/更新 bean 字段值。

<h:inputHidden id="calendarValueHidden" value="#{myCdiBean.calValue}"/>

即使它不可见，但我不知道为什么它会占用屏幕上的空间，从而影响页面的其他组件。即使是 display:none !important 也无法处理输入隐藏组件。

Answer 1

问题症状表明一个常见的初学者错误:将其声明为 <h:panelGrid> 的直接子代.像这样:

<h:panelGrid columns="1">
    <h:inputText ... />
    <h:inputText ... />
    <h:inputHidden ... />
    <h:inputText ... />
</h:panelGrid>

<h:panelGrid>生成一个 HTML <table>和 as documented , 它会把每个直接 child 放在它自己的表格单元格中<td> .生成的 HTML 输出如下所示:

<table>
    <tbody>
        <tr><td><input type="text" /></td></tr>
        <tr><td><input type="text" /></td></tr>
        <tr><td><input type="hidden" /></td></tr>
        <tr><td><input type="text" /></td></tr>
    </tbody>
</table>

A <td>默认情况下有一些边距和填充，这完全解释了你的问题。在浏览器的内置开发人员工具集中检查 HTML 输出和 CSS 样式时，您应该已经注意到它(按 F12 或右键单击，Inspect Element)。

您基本上想要对 <h:inputHidden> 进行分组连同所需的 <h:inputText>在同一个表格单元格内。您可以使用 <h:panelGroup>为此。

<h:panelGrid columns="1">
    <h:inputText ... />
    <h:panelGroup>
        <h:inputText ... />
        <h:inputHidden ... />
    </h:panelGroup>
    <h:inputText ... />
</h:panelGrid>

这将在生成的 HTML 输出中结束，如下所示，完全符合您的意图:

<table>
    <tbody>
        <tr><td><input type="text" /></td></tr>
        <tr><td><input type="text" /><input type="hidden" /></td></tr>
        <tr><td><input type="text" /></td></tr>
    </tbody>
</table>

---

与具体问题无关，使用表格进行布局和定位是不好的。使用 div 和 CSS。