Display elements at the bottom of a p:panel in PrimeFaces

Question

Given a <p:panel> as follows.

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

The <p:panelGrid> inside the <p:panel> is completely irrelevant and can be excluded in its entirely.

Some CSS classes used (completely irrelevant and can be excluded) :

.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;
}

The panel has a fixed height of 360px. It looks like the following.

enter image description here

The style attribute of <fieldset> is one of the failed attempts of displaying it at the bottom of the panel.

How can I display the given HTML <fieldset> as indicated by the note box at the bottom of the panel (essentially a <div>)?

score 3 · Accepted Answer · answered Sep 15 '14 at 20:05

Here,

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

You used bottom property on a relatively positioned element. From the linked documentation:

For relatively positioned elements, that is, those with whose position property is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position.

Actually, you want to use a bottom property value of approximately -180px.

<fieldset ... style="position: relative; bottom: -180px;">

However, it's a bit strange to position the fieldset relatively in this context. Perhaps you want to position it absolutely, relative to the <p:panel>. In that case, this should do:

<p:panel ... style="position: relative;">

    <fieldset ... style="position: absolute; left: 0; bottom: 0; right: 0;">

    </fieldset>
</p:panel>

As per the documentation of the bottom property, that behaves then as follows, which is more logically in your particular markup and less likely to fail when there's more content in the fieldset:

For absolutely positioned elements, that is, those whose position property is set to absolute or fixed, the bottom property specifies the distance between the bottom margin edge of the element and the bottom edge of the block containing the element.

Of course, refactor the style attributes to CSS classes in a real style sheet as soon as possible once you're done with fiddling around.

Display elements at the bottom of a p:panel in PrimeFaces

1 Answers1