Skip to content

[EuiDataGrid] width is more than a container with customBodyRender #8038

@logeekal

Description

@logeekal

Describe the bug
When grid has a static height and customBodyRender , the table width is more than the container which results in a horizontal scrollbar. This phenomenon is also visible in the docs page. Below i have attached a codesandbox link also.

custom_body_render_width_issue.mp4

Impact and severity

This results in degraded user experience because security solution needs to have both static height and custom body render.

One related issue is : #8002

Environment and versions

  • EUI version: 95.10.1 and older
  • React version: 17
  • Kibana version (if applicable):
  • Browser: Firefox, chrome

To Reproduce
Steps to reproduce the behavior:

  1. Go to codesandbox : https://codesandbox.io/p/sandbox/custom-body-render-width-issue-svtl3t?file=%2Fdemo.tsx
  2. Switch Static height On and off and see the scrollbar appearing.
  3. See the bottom of the table and note the horizontal scrollbar.

Expected behavior
When columns have auto width, table should be contained in the scrollbar.

Minimum reproducible sandbox
https://codesandbox.io/p/sandbox/custom-body-render-width-issue-svtl3t?file=%2Fdemo.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions