Page 1 of 1
<p:tieredMenu -> Submenu is too small
Posted: 26 Jun 2019, 22:48
by vished
Hai all,
I have the following issue, please see in the following picture:
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
Re: <p:tieredMenu -> Submenu is too small
Posted: 28 Jun 2019, 08:56
by mert.sincan
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 */
}
}
}
}
Re: <p:tieredMenu -> Submenu is too small
Posted: 14 Jul 2019, 10:17
by vished
Thanks, but this is not a valid CSS code?
Re: <p:tieredMenu -> Submenu is too small
Posted: 18 Jul 2019, 10:16
by mert.sincan
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,
Re: <p:tieredMenu -> Submenu is too small
Posted: 18 Sep 2019, 19:53
by vished
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...
Re: <p:tieredMenu -> Submenu is too small
Posted: 04 Oct 2019, 22:44
by vished
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...
Can anybody help here?
Re: <p:tieredMenu -> Submenu is too small
Posted: 07 Oct 2019, 12:39
by mert.sincan
Could you please attach the sample page for us? I couldn't replicate the alignment issue.
Re: <p:tieredMenu -> Submenu is too small
Posted: 31 Dec 2019, 09:33
by vished
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...
How can I change this? How can I override the class?
This is currently a big problem for me..
Re: <p:tieredMenu -> Submenu is too small
Posted: 31 Dec 2019, 14:44
by mert.sincan
Hi,
Do you have custom styles in your project? I couldn't replicate these issues. Could you please try our sample project?
Best Regards,
