Issues with TabMenu and Rowedit

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

10 Jul 2020, 10:03

Hello,

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

TabMenu:
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 (https://www.primefaces.org/california/menu.xhtml), 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).

Rowedit:
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
Thanks!

atakantepe
Posts: 12
Joined: 29 Jan 2019, 13:03

30 Jul 2020, 10:56

Hi,
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

usb GmbH
Posts: 3
Joined: 06 May 2020, 13:21

18 Aug 2020, 10:56

Hello,

Thank you!

When are you going to release the new version, so that we can verify the fix and use it?

Best regards

atakantepe
Posts: 12
Joined: 29 Jan 2019, 13:03

11 Sep 2020, 16:01

HI,
It's been released.

Best regards,
Atakan Tepe

usb GmbH
Posts: 3
Joined: 06 May 2020, 13:21

24 Sep 2020, 11:56

Hi,

Thank you for your heads up! Where can I find the newest version?
In the docs for california (https://www.primefaces.org/california/docs.xhtml) it says that v2.0.1 is still the newest release and in the store dashboard the newest version to download is v2.0.1 as well.
I checked if the v2.0.1 contains the fixes but the check sum didn't change. Also in the demo the TabMenu issue is still there.

Best regards

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

29 Sep 2020, 16:08

Sorry for the delayed response! I'll release the new version today for you.

Best Regards,

Post Reply

Return to “California - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests