primefacestabmenu

hide p:menuItem in p:tabmenu

I'm using JavaEE with Maven and Primefaces and i want to hide (HTML hidden) a menuitem in Primfaces tabMenu.

Something like the answer in this (prior) question would be good:

.ui-tabmenuitem: {
  visibility: hidden !important;
}

Just another small hint: Adding a style class doesn't work, adding a containerStyle is not supported: See primefaces github page

Solution

  • Your code works for hiding them if I remove the invalid ":"

    .ui-tabmenuitem {
    visibility: hidden !important;  
}

    Tested on PF 6.0 and 5.3.

    If you want to do it dynamically you can conditionally add a styleClass to the relevant menuitem's;

    <p:menuitem styleClass="#{bean.something ? 'ui-tabmenuitem-hidden' : ''}" value="Social">

    and hide it with some script:

    <script>
    $('.ui-tabmenuitem-hidden').parent().css('visibility', 'hidden'); // or toggle()
</script>

    Getting the parent is not possible with pure css, that's why the script is needed (as far as I can see..). Use the inspector i Firebug or similar to figure out what's needed.

    Either just put the script in the page for running at load time, or put it in an onclick-listener on a button (or somewhere else).