Search code examples
cssprimefaces

How do I prevent Primefaces from wrapping between submenu text and triangle icon?

When a sub menu label gets too long, Primefaces puts the right-pointing triangle on the next line:

enter image description here

How can I make Primefaces put the triangle on the same line, as it does with the short sub menu items?

I saw Primefaces menubar menuitem Width but when I added those CSS rules, the behavior did not change.

In particular, changing the a.ui-menuitem-link's CSS that holds both the link text and the triangle icon, didn't help:

a.ui-menuitem-link {
    white-space: nowrap;
    width: auto !important;
}

This is probably some simple CSS thing, but I just don't see it.

Solution

  • The fix for me was to remove the !important from the CSS rule; that way other rules could override it, in this case the regular Primefaces styles.