给出<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>
)?
答案 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类。