Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apollo theme: UI Issue with Frozen Columns and Selection Mode in Dark Mode #6660

Open
Vseslavr opened this issue May 23, 2024 · 2 comments
Open
Assignees
Labels
Component: Theme Issue or pull request is related to Theme

Comments

@Vseslavr
Copy link

Describe the bug

I'm using the latest Apollo theme and have encountered a UI bug. When using dark mode with frozen columns and selection mode enabled in the data table, the column values overlap with the frozen column values when a row is highlighted.

Screenshot 2024-05-15 103303

Reproducer

No response

PrimeReact version

10.2.1 and higher

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Chrome 125

Steps to reproduce the behavior

  1. Apply the Apollo theme.
  2. Enable dark mode.
  3. Configure the data table with frozen columns and selection mode enabled.
  4. Highlight a row.
  5. Observe the overlapping column values.

Expected behavior

Column values should not overlap with frozen column values when a row is highlighted.

@Vseslavr Vseslavr added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 23, 2024
@melloware melloware added Component: Theme Issue or pull request is related to Theme and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels May 27, 2024
@ryan-ju
Copy link

ryan-ju commented Jul 25, 2024

I believe this is an issue with the background's alpha value. In Chrome devtool, the selected <td>'s background color is rgba(129, 140, 248, 0.16), which is see through.

If you look at the theme.css file and search for tr.p-highlight, you'll see the alpha value is not 1.

I changed the alpha value to 1 and it's working fine for me now.

@melloware
Copy link
Member

@ryan-ju can you sumbit a PR here: https://github.com/primefaces/primereact-sass-theme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Theme Issue or pull request is related to Theme
Projects
None yet
Development

No branches or pull requests

4 participants