CODEWITHSUNDEEP
cssprimefaces
Selcuk
Selcuk

Reputation: 865

Primefaces menubar vertical separator

I am using PrimeFaces 3.5. There is a vertical seperator in p:toolbar (https://www.primefaces.org/showcase/ui/panel/toolbar.xhtml).

I want to use vertical seperator in p:menubar. When I use the <p:separator /> tag in p:menubar, it makes a horizontal seperator.

How can i use vertical seperator in p:menubar?

Thanks.

Upvotes: 11

Views: 18229

Answers (4)

Pratik
Pratik

Reputation: 1

It's too late to answer, but hope it helps someone.

With latest versions of primefaces (v10 current) .. For primefaces menubar vertical seperator, you can use

<p:divider layout="vertical"/>

For those who are using lower versions & couldn't find anything .. Use the trick - Show right border of submenu, it will work like vertical seperator. Something LIKE

<p:menubar style="bgcolor: black;">
    
    <p:submenu label="Submenu1" icon="pi pi-list" style="border-right: 1px solid #c8c8c8;">
        <p:menuitem value="Menu01" action="#{bean.method01}" />
        <p:separator />
        <p:menuitem value="Menu02" action="#{bean.method02}" />
    </p:submenu>
    
    <p:submenu label="Submenu2" icon="pi pi-list" style="border-right: 1px solid #c8c8c8;">
        <p:menuitem value="Menu11" action="#{bean.method11}" />
        <p:separator />
        <p:menuitem value="Menu12" action="#{bean.method12}" />
        
    </p:submenu>
    
</p:menubar>

NOTE - I'm using <p:separator /> for Horizontal seperation of menuitem.

Upvotes: 0

Douglas Nassif Roma Junior
Douglas Nassif Roma Junior

Reputation: 2112

Try this:

<p:spacer width="1" height="22" style="position: relative; bottom: -5px;background-color: #A8A8A8; margin-left: 10px;margin-right: 10px" />

enter image description here

Upvotes: 2

Tsimon Dorakh
Tsimon Dorakh

Reputation: 356

I did it with next css:

.ui-menu .ui-separator { 
   background: #A8A8A8; 
   border: none; 
   width: 1px; 
   clear: none; 
   height: 22px; 
   margin: 4px 6px 0; 
   box-shadow: none; 
}

The key things are width and clear. Height, background color and margin you can adjust for your preferences.

Upvotes: 4

Mackelito
Mackelito

Reputation: 4421

Try this:

<p:separator id="customSeparator" style="width:100%;height:1px" />

Upvotes: 0

Related Questions