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

[Bug]: Form with FileUploader in a TableExpandedRow causing large empty space below page #10116

Closed
2 tasks done
pbp-at-ibm opened this issue Nov 15, 2021 · 4 comments
Closed
2 tasks done

Comments

@pbp-at-ibm
Copy link

Package

carbon-components, carbon-components-react

Browser

Chrome

Package version

v10.46.0, v7.46.0

Description

When using a FileUploader inside a Form that is placed within a TableExpandedRow, the page has a large amount of empty space beneath the page content.

Here is an image demonstrating the empty space beneath our Carbon DataTable:

Empty space below page

After investigating the issue, it seems to be a CSS problem with a class named bx--visually-hidden. After setting display: none, or changing position: absolute to position: relative, the large amount of space disappeared without any other obvious changes to the page visuals.

Here is an image demonstrating the bottom of our DataTable after making this change:

Empty space after fix

In our app, the empty space exists whether you expand any rows or not. In the CodeSandbox example provided, the empty space below the DataTable is not that large until you expand one of the top three rows, at which point you can see that you can scroll down and see the empty space.

CodeSandbox example

https://codesandbox.io/s/gifted-sara-00019?file=/src/index.js

Steps to reproduce

  1. You are able to scroll to the bottom of the page, despite the content not taking up the full height of the window.
  2. Expand any row (except the last), and scroll to the bottom of the page to see a large amount of empty space below.

Code of Conduct

@pbp-at-ibm
Copy link
Author

Forgot to add that bx--visually-hidden has position set to absolute in carbon-components/scss/globals/scss/_css--helpers.scss.

@pbp-at-ibm
Copy link
Author

Update on position: absolute: it does fix the extra space issue, but it causes the iconDescription to circle around the spinner when filenameStatus is set to uploading.

@tay1orjones tay1orjones moved this to 🕵️‍♀️ Triage in Design System Dec 15, 2021
@sstrubberg sstrubberg added the severity: 3 https://ibm.biz/carbon-severity label Nov 28, 2022
@sstrubberg sstrubberg moved this from 🕵️‍♀️ Triage to 🥶 Ice Box in Design System Nov 28, 2022
@sstrubberg
Copy link
Member

Thank you for submitting this issue. We have triaged it and will be weighing it's priority against competing workstreams. Feel free to make a PR against this and we'll be happy to review it.

@sstrubberg sstrubberg moved this from 🥶 Ice Box to 🕵️‍♀️ Triage in Design System Nov 30, 2022
@tay1orjones tay1orjones moved this from 🕵️‍♀️ Triage to ⏱ Backlog in Design System Dec 7, 2022
@emyarod emyarod self-assigned this Sep 26, 2024
@carbon-bot
Copy link
Contributor

Hi there! 👋 You may have seen that v10 reached it's end of support on September 30, 2024. In the interest of keeping a tidy issue queue, issues flagged as relating to v10 will be closed.

If this issue is still relevant, please open a new issue with a link to this issue and a reproduction that uses v11.

Thanks again for your participation and contributions to this issue and the Carbon ecosystem! 💙

@carbon-bot carbon-bot closed this as not planned Won't fix, can't repro, duplicate, stale Oct 11, 2024
@github-project-automation github-project-automation bot moved this from 🏗 In Progress to ✅ Done in Design System Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

5 participants