How to increase the width of submenu in primefaces

user_8366758 0
Viewed 63

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. enter image description here

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

primefaces css
2 Answers
user_8806190

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

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