feat(archive): Fix virtualized table cannot scroll #1146
Conversation
|
Verified that @mxiao6 has signed the CLA. Thanks for the pull request! |
| <AutoSizer disableWidth> | ||
| {({ height }) => ( | ||
| <VirtualizedTable | ||
| height={height - 120} // Subtruct SearchBar and Breadcrumbs heights |
There was a problem hiding this comment.
The need for this is counterintuitive, since the search bar and breadcrumbs are declared outside of the AutoSizer. Does the AutoSizer calculate its height based on the viewport? Does it still work if there are multiple previews on the same page?
There was a problem hiding this comment.
The need for this is counterintuitive, since the search bar and breadcrumbs are declared outside of the AutoSizer. Does the AutoSizer calculate its height based on the viewport? Does it still work if there are multiple previews on the same page?
No it's not based on the viewport. AutoSizer expands to fill its parent but does not work well flex box container. I added a block container and problem solved!
mxiao6
force-pushed
the
fix-archive-scroll
branch
from
67b5cad to
69206fb
Compare
| @@ -4,15 +4,16 @@ import elementsMessages from 'box-elements-messages'; // eslint-disable-line | |||
| import intlLocaleData from 'react-intl-locale-data'; // eslint-disable-line | |||
| import Internationalize from 'box-ui-elements/es/elements/common/Internationalize'; | |||
| import fuzzySearch from 'box-ui-elements/es/utils/fuzzySearch'; | |||
| import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table'; | |||
| import { AutoSizer } from 'react-virtualized'; | |||
| import { Column, SortDirection } from 'react-virtualized/dist/es/Table/index'; | |||
There was a problem hiding this comment.
You should be able to omit /index here.
| @@ -4,15 +4,16 @@ import elementsMessages from 'box-elements-messages'; // eslint-disable-line | |||
| import intlLocaleData from 'react-intl-locale-data'; // eslint-disable-line | |||
| import Internationalize from 'box-ui-elements/es/elements/common/Internationalize'; | |||
| import fuzzySearch from 'box-ui-elements/es/utils/fuzzySearch'; | |||
| import VirtualizedTable from 'box-ui-elements/es/features/virtualized-table'; | |||
| import { AutoSizer } from 'react-virtualized'; | |||
There was a problem hiding this comment.
Does this work?
import { AutoSizer, Column, SortDirection } from 'react-virtualized';
| />, | ||
| ]} | ||
| </VirtualizedTable> | ||
| <div className="bp-AutoSizerContainer"> |
There was a problem hiding this comment.
This isn't a new component, so it should probably be called bp-ArchiveExplorer-table or something.
No description provided.