[Table] Fix Table sizing when shown in flex parent #1479
Conversation
|
@cmslewis failed linting and scrolling unit tests... need a preview to properly review this. |
Fix testsPreview: documentation | table |
| right: 0; | ||
| bottom: 0; | ||
| // use `relative` to ensure the table can size itself according to the MAIN quadrant's contents alone. | ||
| // other quadrants should remain `absolute` to ensure they're taken out of the document flow. |
There was a problem hiding this comment.
👍 this is usually my go-to solution for cutting my components out of the layout flow
| z-index: $table-quadrant-z-index-main; | ||
| // the MAIN quadrant should fill the whole table so that ghost cells will be visible if enabled | ||
| width: 100%; | ||
| height: 100%; |
There was a problem hiding this comment.
height: 100% can be tricky sometimes. just want to make sure this works correctly.
<div>
<div style="height: 100%">everything is cool</div>
<div>what now?</div>
</div>this should be okay since we control the siblings of this div, but just something to keep an eye on.
There was a problem hiding this comment.
Yep, I was cognizant of this. We're good as far as I can tell. Every other sibling is position: absolute.
| right: -$table-quadrant-scroll-container-overflow; | ||
| height: 100%; |
There was a problem hiding this comment.
i prefer to use top: 0; bottom: 0; with position: absolute
| > | ||
| {renderColumns({}, LARGE_NUM_COLUMNS)} | ||
| </Table>, | ||
| <div style={{ height: CONTAINER_HEIGHT, width: CONTAINER_WIDTH }}> |
There was a problem hiding this comment.
so, what happens if users DON'T put the table in an explicitly sized div? can we never use normal flow?
There was a problem hiding this comment.
That was the point of this PR actually: to fix that.
BEFORE (buggy):
AFTER (fluid height):
| right: -$table-quadrant-scroll-container-overflow; | ||
| height: 100%; | ||
| bottom: 0; | ||
| height: auto; |
There was a problem hiding this comment.
not sure this is entirely necessary, but won't hurt
There was a problem hiding this comment.
Whenever I specify both top and bottom, I like to take height out of the picture so the two schemes don't compete unpredictably.
Little CSS polishesPreview: documentation | table |
* Style fixes when table is within a display: flex container * Remove unnecessary rules * Clearer comment * Try to fix lint * Fix tests * Little CSS polishes
* [Table] Fix Table sizing when shown in flex parent (#1479) * Style fixes when table is within a display: flex container * Remove unnecessary rules * Clearer comment * Try to fix lint * Fix tests * Little CSS polishes * Prepare Release 1.25.2 * fix normalize.css version on docs site (#1478) * fix normalize.css version in site-docs * rebuild site-docs.css * Rebuild * [Table] Fix for user-land sass compilation (#1483)
Fixes #1472
Checklist
Changes proposed in this pull request:
BEFORE: All quadrants were
position: absolute, meaning the surrounding table container had no idea how big to make itself, so it collapsed down to itsmin-heightof60pxin containers that didn't have a fixed size.AFTER: Keep the
MAIN-quadrant content in the document flow to ensure the table sizes itself appropriately.Reviewers should focus on:
flexappropriately?MAINquadrants)