Primefaces p:tabMenu align p:menuitem to right

Question

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: while it should look like this:

misman · Answer 1 · 2017-01-31T14:33:08.573

2

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>

edited Jan 31 '17 at 14:33

answered Jan 30 '17 at 14:35

misman

1,347
3
21
39

I guess I will try this ;) – FranzHuber23 Jan 30 '17 at 20:35
I update my answer. I add panel grid draft and columclasses you can use ;) – misman Jan 31 '17 at 06:08
This works but [looks quite ugly](https://abload.de/img/ugly0vbel.png) :D – FranzHuber23 Jan 31 '17 at 14:02
yes you need to write some css commandlinkcssclass :) by the way @Kukeltje answer may help you. I will test it – misman Jan 31 '17 at 14:22
You're right :D I mixed both solutions up and now it looks bad :D But I'll try to fix this. – FranzHuber23 Jan 31 '17 at 14:32
Thanks, this did it for me ;) – FranzHuber23 Jan 31 '17 at 15:12
I'll added the 'update' to the answer above. You can also propose improvements like that yourself to existing questions/answers. That is highly appreciated since it improves the quality of the Q/A without it getting fragmented – Kukeltje Jan 31 '17 at 15:51

Kukeltje · Accepted Answer · 2017-01-31T15:50:20.813

1

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

edited Jan 31 '17 at 15:50

answered Jan 31 '17 at 07:50

Kukeltje

12,223
4
24
47

1

Adding a style class doesn't work, adding a containerStyle is not supported: https://github.com/primefaces/primefaces/issues/1450... – FranzHuber23 Jan 31 '17 at 14:19
1

Thanks for investigating. So in the not to distant future (pf 6.1) it will be supported – Kukeltje Jan 31 '17 at 15:24
Yes ;) But your solution works as well now. Together with [mismanc](http://stackoverflow.com/users/1562723/mismanc) I figured it out. – FranzHuber23 Jan 31 '17 at 15:28

Primefaces p:tabMenu align p:menuitem to right

2 Answers2

Linked