Thursday 16 February 2012

PrimeFaces: How to style (css) a menu in an accordionPanel

Tested with PrimeFaces 3.1

Before (with default css)

<p:accordionPanel>  
 <p:tab title="Foo tab title">  
  <p:menu>  
    <p:menuitem value="Foo menu item title" url="#" />
  </p:menu>
  </p:tab>
</p:accordionPanel>
Result:

After (with overriden css)

Just add the class "accordionMenu" to the accordionPanel:
<p:accordionPanel styleClass="accordionMenu">  
 <p:tab title="Foo tab title">  
  <p:menu>  
    <p:menuitem value="Foo menu item title" url="#" />
  </p:menu>
  </p:tab>
</p:accordionPanel>
.accordionMenu .ui-menu {
 width:100% !important; 
 
}
.accordionMenu .ui-accordion-content {
 padding:0 !important;
 overflow:inherit !important;
}

.accordionMenu .ui-helper-clearfix:after {
 height:inherit !important;
}
Result:

2 comments:

  1. very nice im sercheaing it since two days ,thx for this article ;-)

    ReplyDelete
  2. Is it possible to remove the default white bar on top of the accordionpanel tabs?

    ReplyDelete