How to increase the width of submenu in primefaces

Question

Following is the code:

<p:commandButton styleClass=".MenuButtons" id="adminButton" value="administration']}"/>
      <p:tieredMenu overlay="true" trigger="adminButton" my="left top" at="left bottom">
        <p:menuitem styleClass=".MenuItems" value="file" url=" "/>
        <p:submenu  label=".next']}">
            <p:menuitem styleClass=".MenuItems" value="edit" url=" "/>
            <p:menuitem styleClass=".MenuItems" value="revert" url=""/>
        </p:submenu>
        <p:menuitem styleClass=".MenuItems" value="home" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit1" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit2" url="" rendered="" />
        <p:menuitem styleClass=".MenuItems" value="quit3" url="" rendered="" />
        </p:tieredMenu>

I tried to increase the width of submenu. Tried following ways:

1. ul.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{ width:160px; }

2. Adding styleclass to submenu and applying.

Screenshot from browser. Both solutions are not working.Can anyone please help.

Answer 1

The width of the submenu is set through the following CSS rule:

.ui-menu .ui-menu-parent .ui-menu-child {
    width: 12.5em;
    ...
}

See https://github.com/primefaces/primefaces/blob/11.0.0/primefaces/src/main/resources/META-INF/resources/primefaces/menu/menu.css#L89-L100

All you need to do is override it. For example:

html .ui-menu .ui-menu-parent .ui-menu-child {
    width: ...;
}

See also:

• How do I override default PrimeFaces CSS with custom styles?

Answer 2

I do this and it works in my projects...

/** Expand default menu width */
body .ui-menu .ui-menu-list .ui-menu-child {
    width: auto;
}