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

时间:2014-09-15 18:17:57

标签: css jsf primefaces panel jsf-2.2

给出<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。它看起来如下。

enter image description here

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

如何按面板底部的 note 框显示给定的HTML <fieldset>(基本上是<fieldset>)?

1 个答案:

答案 0 :(得分:3)

下面,

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