Search code examples
cssjsfprimefacestabmenu

Primefaces p:tabMenu align p:menuitem to right

I'm using Java EE with JDK 1.8, Maven and Primefaces. Regarding the tabMenu of Primefaces I have the following question: How can I align the last menuitem to the right? Please see my code below:

<p:tabMenu activeIndex="#{param.i}">
    <p:menuitem value="Login" outcome="/Person/PersonLogin.xhtml"
          icon="fa fa-sign-in"
          rendered="#{!personModel.personLoggedIn()}">
       <f:param name="i" value="#{(!personModel.personLoggedIn())?0:99}"/>
    </p:menuitem>
    <p:menuitem value="Register" outcome="/Person/PersonRegistration.xhtml"
          icon="fa fa-user-plus"
          rendered="#{!personModel.personLoggedIn()}">
       <f:param name="i" value="#{(!personModel.personLoggedIn())?3:95}"/>
    </p:menuitem>
    <p:menuitem value="#{personModel.usedAccount.balanceFormatted}"
          outcome="/Overviews/TransactionOverview.xhtml"
          style="float:right; margin-right: 30px; #{personModel.usedAccount.balance >=0 ? 'color:green;' : 'color:red;'}"
          rendered="#{personModel.personLoggedIn()}">
       <f:param name="i" value="#{(personModel.personLoggedIn())?123:94}"/>
   </p:menuitem>
</p:tabMenu>

This code snippet style="float:right; margin-right: 30px; #{personModel.usedAccount.balance >=0 ? 'color:green;' : 'color:red;'}" in the last menuitem still doesn't align it on the right side:

Currently the output is the following: enter image description here while it should look like this: enter image description here

Solution

  • For me the following works (tested in the PF showcase on 6.0.x)

    .ui-tabmenuitem:last-child {
  float: right !important;
}

    Although it is better to not use !important and see if adding a styleClass to the menuItem or the tabMenu and use that in your selector works to (no time to try, sorry).

    Update: As @mismanc and OP found out, styleClass or related is not supported on the tabMenu but a class is. So if you do not want this on every tabmenu

    <p:tabMenu class="flo">
   ...
</p:tabMenu>

    and use the class in the selector

    .flo .ui-tabmenuitem:last-child {
    float: right;
}