<p:tieredMenu -> Submenu is too small

Post Reply
vished
Posts: 300
Joined: 02 Feb 2014, 17:38

26 Jun 2019, 22:48

Hai all,

I have the following issue, please see in the following picture:
Image

Seems like the first menu is fine, but the submenu´s are too small.
How can this be fixed?

Code: Select all

<p:tieredMenu
model="#{placeholderMenuNotLazyController.menu}"
overlay="true" trigger="placeholderButton" my="left top"
at="left bottom" style="width:300px !important" />
Also the arrow should be on the same height as the font, but it´s moreless underneath...

Thanks

User avatar
aragorn
Posts: 3620
Joined: 29 Jun 2013, 12:38

28 Jun 2019, 08:56

Please add the following scss code to _theme_styles.scss and then provide new css files using sass command;

Code: Select all

/* Add your customizations of theme here */
.ui-tieredmenu {
    &.ui-menu {
        .ui-menu-parent {
            .ui-menu-child {
                width: 300px;  /* Please change this value acording to your issue */
            }
        }
    }
}

vished
Posts: 300
Joined: 02 Feb 2014, 17:38

14 Jul 2019, 10:17

Thanks, but this is not a valid CSS code?

User avatar
aragorn
Posts: 3620
Joined: 29 Jun 2013, 12:38

18 Jul 2019, 10:16

It is a SCSS code. You need to provide css file using SCSS command.

On PF core, this component has a default width value;

Code: Select all

.ui-menu .ui-menu-parent .ui-menu-child {
    width: 12.5em;
    ...
 }
Therefore, you need to override it using my SCSS code.

Best Regards,

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests