Issues with TabMenu and Rowedit

Post Reply
usb GmbH
Posts: 1
Joined: 06 May 2020, 13:21

10 Jul 2020, 10:03


we discovered two issues with the current version of California (2.0.1). One with the TabMenu and the other with the RowEdit functionality.

Used Theme: California-Noir
Primefaces version: 7.0

When using a tabmenu with multiple menu entries it is possible that a line break occurs to display all menu elements which is fine. The problem is that the menu elements in the second line "jump around" when hovering over the entries in the first line. The second line is not correctly aligned to the beginning of the menu too.
To reproduce use the California Demo and navigate to Components -> Menu (, scroll down to the TabMenu and resize your browser window so that the line break occurs. Our TabMenus contain more elements which is why we can observe this issue more frequently.
We discovered that this behaviour is due to the border not being set correctly on menu items that are neither hovered nor active. To fix this you need to add a default border to TabMenu items (line 268 on _menu.scss).
In addition to this it would also be nice if the active menu item could get a different background color than the non-active items (e.g slightly darker or lighter).

We added the rowedit functionality to the datatables in our application and discovered that clicking on the pencil leads to Primefaces marking the table row as "ui-state-highlight" which in turn leads to California setting the background-color of the row to the same as the rowedit buttons. The check and cancel button are now invisible and can only be seen if the user is hovering over them. This leads to a bad user experience.
This can also be fixed quite easily by adjusting the _data.scss and lightening the background-color of highlighted table rows.
Sadly there is no example for rowediting in the Demo, maybe this could also be added.

To conclude:
  • Please fix the TabMenu
  • Use a different background-color for selected TabMenu elements
  • Fix the Rowedit or table coloring
  • Maybe add the Rowedit feature to the demo

Posts: 6
Joined: 29 Jan 2019, 13:03

30 Jul 2020, 10:56

Tabmenu hover and alignment issues fixed.
For the tabmenu active you can add this code to your _theme_styles.scss file.

Code: Select all

.ui-tabmenu {
    .ui-tabmenu-nav {
        .ui-tabmenuitem {
            &.ui-state-active {
                background-color: scale-color($primaryColor, $lightness: 20%);
Rowedit coloring issue fixed. We are currently updating our themes and their demo pages.

Best regards,
Atakan Tepe

Post Reply

Return to “California - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests