Andrea Ebano Andrea Ebano - 2 years ago 147
CSS Question

PrimeFaces menubar, last menuitem on float:right

i have this menubar in my project, i'm using PrimeFaces for the first time:

<p:menubar styleClass="sso_header ui-widget-header " style="width:99.5%; margin-top: 3px; border-radius: 10px;" >
<p:menuitem value="Test" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
<p:menuitem value="LOG IN" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
</p:menubar>


I need last menuitem
float:right;
, at least I tried to include external style in this way:

<h:outputStylesheet name="css/style.css" />


and assign my css class to the menutitem.

I tried inline style whit the
!important
attribute, nothing works.

After inspect code from browser i noticed that Primefaces assign my style to a
<a>
inside a
<li>
.

There is a way to assign float right to that
<li>
in PrimeFaces?


Thanks in advance.

Answer Source

Check the html code that PrimeFaces is generating and use the css classes to define your styles, for your posted code something like this should work

.sso_header .ui-menuitem.ui-widget.ui-corner-all:last-child {
    float: right;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download