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 rows are not the full width in scroll both mode #2622

Closed
luke-z opened this issue Jun 2, 2022 · 0 comments
Closed

Datatable rows are not the full width in scroll both mode #2622

luke-z opened this issue Jun 2, 2022 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working vue2
Milestone

Comments

@luke-z
Copy link

luke-z commented Jun 2, 2022

Describe the bug

A Datatable with

:scrollable="true" scrollHeight="flex" scrollDirection="both"

loses the background color for the rest of the row beyond the first few visible columns.

image

The background only covers approximately the first "100%" of the width.

By giving the table element a width above 100%, in this case 135%, it works.
image

Is this an issue from my side or is this a bug?

I'm using Nuxt2 with typescript, but the example also happens in the js version in Vue2.

Reproducer

https://codesandbox.io/s/trusting-andras-pd7p2h

PrimeVue version

2.9.2

Vue version

2.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

  1. create a table with :scrollable="true" scrollHeight="flex" scrollDirection="both"
  2. add enough columns to make it scrollable
  3. add a background color to the wrapper to see the missing "table width"

Expected behavior

The table should be as wide as the scrollable viewport.
It wouldn't bother me so much if it were only the background color, but the highlighting is also affected.

(selection-mode="single")

@luke-z luke-z added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Jun 2, 2022
@luke-z luke-z changed the title Component: Title Datatable rows are not the full width in scroll both mode Jun 2, 2022
@mertsincan mertsincan added this to the 3.16.2 milestone Aug 22, 2022
@mertsincan mertsincan self-assigned this Aug 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working vue2
Projects
None yet
Development

No branches or pull requests

3 participants