CODEWITHSUNDEEP
cssjsfprimefacestabmenu
FranzHuber23
FranzHuber23

Reputation: 4252

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

Upvotes: 2

Views: 1953

Answers (2)

Kukeltje
Kukeltje

Reputation: 12337

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

Upvotes: 1

misman
misman

Reputation: 1385

I have just checked the css that primefaces used. And I see that your css code is used for <a> element instead of outer <li> element. When I manually add your css to outer <li> element, it is working as you want. You need to find a way to add your css to outer <li>

Or, you may use

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-10,ui-grid-col-2>

  • first element your <p:tabMenu> element without last <p:menuitem>

  • and second one can be a <p:commandLink> element

    <p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-10 tabMenucssclass,ui-grid-col-2 commandlinkcssclass> <p:tabMenu></p:tabMenu> <p:commandLink></p:commandLink> </p:panelGrid>

Check out primefaces panelGrid element

UPDATE - This is not for score, just for answer you should accept @Kukeltje answer

.flo .ui-tabmenuitem:last-child{float: right;}
<p:tabMenu class="flo"></p:tabMenu>

Upvotes: 2

Related Questions