<p:tieredMenu -> Submenu is too small

Post Reply
vished
Posts: 445
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
PF 8.0

mert.sincan
Posts: 4129
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: 445
Joined: 02 Feb 2014, 17:38

14 Jul 2019, 10:17

Thanks, but this is not a valid CSS code?
PF 8.0

mert.sincan
Posts: 4129
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,

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

18 Sep 2019, 19:53

Great, this is working.
Can the first menu also be adjusted? The height is too big and the icon on the right side is not at the same place...

Image
PF 8.0

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

04 Oct 2019, 22:44

vished wrote:
18 Sep 2019, 19:53
Great, this is working.
Can the first menu also be adjusted? The height is too big and the icon on the right side is not at the same place...

Image
Can anybody help here?
PF 8.0

mert.sincan
Posts: 4129
Joined: 29 Jun 2013, 12:38

07 Oct 2019, 12:39

Could you please attach the sample page for us? I couldn't replicate the alignment issue.

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

31 Dec 2019, 09:33

I´m generate the menu dynamic....

What I see so far it´s here: .ui-menu .ui-menuitem-link...
If I change the line-height from 16px to 2px it looks better, but not 100% correct...

Here an example... As you can see the icons are not 100% in line anymore...
Image

How can I change this? How can I override the class?
This is currently a big problem for me..
PF 8.0

mert.sincan
Posts: 4129
Joined: 29 Jun 2013, 12:38

31 Dec 2019, 14:44

Hi,

Do you have custom styles in your project? I couldn't replicate these issues. Could you please try our sample project?

Best Regards,

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest