How to distribute p:menuitems in p:menubar accordingly?

Question

I have a <p:menubar> with some <p:menuitem>s to display a horizontal menu to users. This is my current simplified code (removed internationalization and other non-related stuff):

<p:menubar id="mbrMainMenu" styleClass="centeredMenuBar">
    <p:menuitem value="Home" outcome="/index.xhtml" />
    <p:submenu label="Product Catalog">
        <!-- some menuitems here... -->
    </p:submenu>
    <p:submenu label="Make your own design">
        <!-- some menuitems here... -->
    </p:submenu>
</p:menubar>

Code above gets displayed like this:

 _____________________________________________________ _____________________________________
|        |                   |                        |                                     |
|  Home  |  Product Catalog  |  Make your own design  |         <wasted whitespace>         |
|________|___________________|________________________|_____________________________________|

I'm searching for a look n' feel where the <p:menuitem> and <p:submenu> are centered and the width of each one is distributed accordingly (I'm not very skilled with CSS):

 _______________________________________________________________________________
|                  |                           |                                |
|       Home       |      Product Catalog      |      Make your own design      |
|__________________|___________________________|________________________________|

I've found how to center them using a custom CSS centeredMenuBar (taken from here: How to centralize primefaces menubar?), but now I'm having a hard time trying to distribute the menu items along the menu bar, they are all stick.

 __________________________________________________________________ ____________
|            |        |                   |                        |            |
|  <wasted>  |  Home  |  Product Catalog  |  Make your own design  |  <wasted>  |
|____________|________|___________________|________________________|____________|

I've tried this but failed:

Creating a custom CSS to override the ui-menu-item and ui-menu-parent PrimeFaces styles:
```
.ui-menu-item .ui-menu-parent {
    width: auto;
}
```
Using style="width: auto;" directly in the <p:menuitem> and <p:submenu>.

Any idea how to accomplish this?

This is what I have:

enter image description here

This is what I want (last picture edited in paint just to show the last form):

enter image description here

To be sure: 1/ Do you want the whole bar to be full width or just the length of text plus some padding? 2/ Does "Home" and "Very long text" need to have equal width or "depends of the length of text + some fixed padding"? — FelipeAls, Sep 21 '13 at 19:14
Something close can be realized using `inline-block`'s or `table-cell`, but getting the vertical separators mid-way between the text elements is hard to do unless you add some extra mark-up. What are you willing to consider? — Marc Audet, Sep 21 '13 at 19:14
@FelipeAls 1/ I want to maintain the whole bar to be full width to the page. 2/ Currently, they have different width, I wish there is a way they could have same width and be distributed accordingly dynamically in case I need to add more options in the menu. By now, they are all distributed and centered but there's a big space of difference between the options and the Window Borders. — Luiggi Mendoza, Sep 21 '13 at 19:18
@MarcAudet I have all the freedom to add and edit code as long as *it works* i.e. the clients and users see the UI and are comfortable. — Luiggi Mendoza, Sep 21 '13 at 19:19
Would my previous answer about [css table-cell equal width](http://stackoverflow.com/questions/10525744/css-table-cell-equal-width/10526275#10526275) be a suitable solution then? The value of `table-layout` changes the algorithm used by browsers from "adapt to text" to "adapt to what author set" (and table layout - in CSS - will render items on a single row, same height "cells", very flexible whatever the number of "cells"). — FelipeAls, Sep 21 '13 at 19:22
@FelipeAls I could give it a try, but unsure if it will work because the `` are displayed in form of `

score 1 · Accepted Answer · edited Sep 23 '13 at 05:04

1

I have tried this and this works properly for me, here has no waste of space. You can try this.

This is my <p:menubar>. Note that I'm using styleClass="menu" instead of centeredBar as proposed in your current solution.

<p:menubar styleClass="menu">
    <p:menuitem value="Home"></p:menuitem>
    <p:menuitem value="Apply Leave"></p:menuitem>
    <p:menuitem value="Calender"></p:menuitem>
    <p:submenu label="New">  
       <p:menuitem value="Project" url="#" />  
       <p:menuitem value="Other" url="#" />  
    </p:submenu>
</p:menubar>

And this is the css I have written

div.menu{
text-align: center;
}
.menu div.ui-menubar {
text-align: center;
}
.menu .ui-menu-list{
width:100%;
display: inline-flex;
}
div.menu>ul.ui-menu-list>li>a{
width: 100%;
}
div.menu>ul.ui-menu-list>li{
width: 100%;
}
.ui-menuitem-text{
float: none!important;
}

edited Sep 23 '13 at 05:04

Luiggi Mendoza

85,076
16
154
332

answered Sep 22 '13 at 05:11

Diganta

671
3
11
27

This worked but only for all ``s, not for ``. – Luiggi Mendoza Sep 22 '13 at 17:22
Sorry I am not getting you. is this fulfilling your requirement `"I'm searching for a look n' feel where the and are centered and the width of each one is distributed accordingly"` – Diganta Sep 23 '13 at 03:42
Yes, I've tried this and didn't work as expected. I'm not sure if the fault is the other CSS. I'll try again and let you know. – Luiggi Mendoza Sep 23 '13 at 03:50
What is the problem you are facing ? Wastage of space on both ends of menuBar or manues under submenu's width are not same as parent(submenu)? – Diganta Sep 23 '13 at 04:09
Waste of space on both ends of menuBar. – Luiggi Mendoza Sep 23 '13 at 04:09
can you post a snapshot please? with mouse hover. – Diganta Sep 23 '13 at 04:12
@Luiggi Mendoza Question is clear. In my case out put is exactly what you want. One thing, have you changed your `'s` css into `menu`? because I set css attribute named `menu` in my answer. – Diganta Sep 23 '13 at 04:47
I guess that's my current mistake. I'll try one more time. – Luiggi Mendoza Sep 23 '13 at 04:48
I made a rookie mistake. It works now, thanks. By the way, it would be great to edit your question to add that I should remove the `centeredMenuBar` class and use the `menu` one instead. – Luiggi Mendoza Sep 23 '13 at 04:51
You are welcome. So please edit your `cssClass` attribute's value into `menu` in your question. – Diganta Sep 23 '13 at 04:58
Nope I must not do that, note that I've used the `centeredMenuBar` class from another Q/A linked in my question :). – Luiggi Mendoza Sep 23 '13 at 04:59

score -1 · Answer 2 · answered Dec 17 '14 at 20:09

Setting the margin-left and margin-right as shown below helped in my case to stretch the menu items spread out evenly across the length of the menubar.

.ui-menubar .ui-menuitem-text{
    font-size: 20px;
    padding: 3px;
    margin-left: 25px;
    margin-right: 25px;
}

Hope it helps someone looking for an alternate solution.

How to distribute p:menuitems in p:menubar accordingly?

2 Answers2