显示PrimeFaces中p：面板底部的元素

Question

给出<p:panel>如下。

<p:panel style="height: 360px; width: 500px;" styleClass="panel-padding" header="Custom Measurements">
    <p:panelGrid columns="2" style="width: 100%;" styleClass="panelgrid-noborder">
        <p:outputLabel for="sleeveLength" value="Sleeve Length"/>
        <h:outputText id="sleeveLength" value="N/A" style="display: block; border: 1px dotted #999;"/>

        <p:outputLabel for="sleeveSize" value="Sleeve Size"/>
        <h:outputText id="sleeveSize" value="N/A" style="display: block; border: 1px dotted #999;"/>
    </p:panelGrid>

    <fieldset style="border:  1px dotted #999; bottom: 0; position: relative; margin: 9px;">
        <legend>
            <h:outputText value="Note" style="font-weight: bold;"/>
        </legend>
        Text goes here.
    </fieldset>
</p:panel>

<p:panelGrid>内的<p:panel>完全无关紧要，可以完全排除。

使用了一些CSS类（完全不相关，可以排除）：

.panelgrid-noborder.ui-panelgrid tr, .panelgrid-noborder.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}

.panel-padding.ui-panel .ui-panel-content {
    padding: 0;
    margin: 0;
}

面板的固定高度为360px。它看起来如下。

style的{​​{1}}属性是在面板底部显示失败的失败尝试之一。

如何按面板底部的 note 框显示给定的HTML <fieldset>（基本上是<fieldset>）？

Answer 1

下面，

<fieldset ... style="position: relative; bottom: 0;">

您在相对bottom元素上使用了positioned属性。来自链接文档：

  

对于相对定位的元素，即那些position属性设置为relative的元素，bottom属性指定元素底边的距离被移动到正常位置以上。

实际上，您希望使用大约bottom的{​​{1}}属性值。

-180px

但是，在此上下文中相对定位字段集有点奇怪。也许你想要相对于<fieldset ... style="position: relative; bottom: -180px;"> 绝对定位它。在这种情况下，这应该做：

<p:panel>

根据bottom属性的文档，其行为如下所示，这在逻辑上更符合您的特定标记，并且当字段集中有更多内容时不太可能失败：

  

对于绝对定位的元素，即position属性设置为<p:panel ... style="position: relative;"> <fieldset ... style="position: absolute; left: 0; bottom: 0; right: 0;"> </fieldset> </p:panel> 或absolute的那些，fixed属性指定元素的下边缘边缘与包含该元素的块的下边缘之间的距离。

当然，一旦你完成了摆弄，就尽快将bottom属性重构为真实样式表中的CSS类。