3

how could I add an icon to a component p:panel?

<p:panel header="text" />

Unfortunately it does not support an "icon" attribute. So I tried this:

<f:facet name="header">
 <h:outputText value="text">
</h:outputText>
 <p:commandLink styleClass="ui-icon ui-icon-comment" />
</f:facet>

But this adds a linebreak between the text and the command Link which only shows up as an icon.

Does someone know how I could else do this? ty

Tiny
  • 27,221
  • 105
  • 339
  • 599
membersound
  • 81,582
  • 193
  • 585
  • 1,120
  • Have you tried changing the style for the panel itself? I mean, using a custom class that defines an image as the background? – Andre Feb 29 '12 at 17:42

2 Answers2

5

The reason the icon is causing the text below it to shift downwards is because the ui-icon class has a display: block style that causes the image to greedily consume the line and push the text down. The following header facet will build a 2 column table around the image and text forcing the header to display them both side by side.

<f:facet name="header">
  <h:panelGrid columns="2">
    <span class="ui-icon ui-icon-comment" />
    <h:outputText value="text" />
  </h:panelGrid>
</f:facet>
maple_shaft
  • 10,435
  • 6
  • 46
  • 74
  • 2
    ty for your hints! this is not bad, BUT it adds very much space to the header bar. almost 2 times as it is without the grid. I think the grid somehow takes much space for this. But with your hint, I just overwrote the display styling of the ui-icon like `style="display:inline-block;` and voila, it works! – membersound Feb 29 '12 at 21:42
  • @membersound Thats a cleaner way to do the same thing. Glad to help. – maple_shaft Feb 29 '12 at 23:47
3

This is the way you can add an icon to a panel component:

<p:panel header="the header text you want">
    <f:facet name="actions">
        <p:commandLink
            styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
            <h:outputText styleClass="ui-icon ui-icon-help" />
        </p:commandLink>
    </f:facet>
</p:panel>
John Alexander Betts
  • 4,718
  • 8
  • 47
  • 72