[Bug]: Form with FileUploader in a TableExpandedRow causing large empty space below page #10116
Closed
2 tasks done
Labels
component: data-table
component: file-uploader
component: form
package: react
carbon-components-react
role: dev 🤖
severity: 3
https://ibm.biz/carbon-severity
type: bug 🐛
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:
After investigating the issue, it seems to be a CSS problem with a class named
bx--visually-hidden
. After settingdisplay: none
, or changingposition: absolute
toposition: 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:
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
Code of Conduct
The text was updated successfully, but these errors were encountered: