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

DataTable: CSS Bug with attributes 'showGridLines' and 'scrollable' #6857

Closed
paulBrdInfotel opened this issue Jul 9, 2024 · 11 comments · Fixed by #7151 · May be fixed by leoo1992/GeradorQRCode#95
Closed

DataTable: CSS Bug with attributes 'showGridLines' and 'scrollable' #6857

paulBrdInfotel opened this issue Jul 9, 2024 · 11 comments · Fixed by #7151 · May be fixed by leoo1992/GeradorQRCode#95
Labels
Component: Tailwind Tailwind specific issue
Milestone

Comments

@paulBrdInfotel
Copy link

Describe the bug

Firstaly, If you use a DataTable with the showGridLines and scrollable attributes, when you scroll the DataTable you can see the data in the top row because the header has no longer a border.

image

Then, I couldn't find an attribute to have a border at the bottom of the DataTable. Because if my table doesn't show all line and i have a scroll bar.

NO OK :
image

OK :
image

Reproducer

No response

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Edge

Steps to reproduce the behavior

No response

Expected behavior

No response

@paulBrdInfotel paulBrdInfotel added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 9, 2024
@melloware melloware added Component: Theme Issue or pull request is related to Theme Status: Needs Reproducer Issue needs a runnable reproducer and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jul 11, 2024
Copy link

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

@paulBrdInfotel
Copy link
Author

I tried to create the bug on Stackblitz but I can't do it.
But i found the cause, I use PrimeReact with Tailwind Css and the layer of Tailwind has priority over PrimeReact layer.
I do the same configuration like the documentation.

image

Tailwind css add the attribut 'border-collapse: collapse' in table :

image

@melloware
Copy link
Member

Are you using Tailwind only or also a PF theme?

@melloware melloware added Component: Tailwind Tailwind specific issue and removed Component: Theme Issue or pull request is related to Theme labels Jul 11, 2024
@paulBrdInfotel
Copy link
Author

If you mean PrimeReact theme, I use lara light blue theme :

image

@melloware
Copy link
Member

@paulBrdInfotel try this I can't reproduce:
pr-6857.zip

Unzip it and run npm install then npm run dev and go to http://localhost:3000/ it looks fine for me with Tailwind and Lara Light Blue.

@paulBrdInfotel
Copy link
Author

I've run your code and I'm having the same problem. You can see it on the screenshot. I've tried it on Edge and Chrome (I've put their version on) but I might try it on Firefox next Tuesday.

image
image

image
image

@melloware
Copy link
Member

totally fine for me in latest Chrome and Firefox:

image

image

@paulBrdInfotel
Copy link
Author

Have you tried scrolling down? Because in your screenshot, the scroll bar is at the top.

@melloware
Copy link
Member

melloware commented Jul 12, 2024

i see yeah it looks like the header is off one pixel.

I am sure you can look at the CSS in the inspector and figure out what TailWind or PR style is affecting it.

@melloware melloware removed the Status: Needs Reproducer Issue needs a runnable reproducer label Jul 12, 2024
@paulBrdInfotel
Copy link
Author

I'm going to try and solve this problem, but I imagine that other people will have the same bug.

It would be a pity not to fix this bug for future users.

Thanks for your help.

@melloware
Copy link
Member

Yep it looks like its juts slightly off so i am sure its a CSS change somewhere in here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Tailwind Tailwind specific issue
Projects
None yet
2 participants