-
Notifications
You must be signed in to change notification settings - Fork 894
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
[Table Visualization] Fix width of multiple tables when rendered in column view #4638
Conversation
Signed-off-by: Sirazh Gabdullin <[email protected]>
Signed-off-by: Sirazh Gabdullin <[email protected]>
Codecov Report
@@ Coverage Diff @@
## main #4638 +/- ##
=======================================
Coverage 66.49% 66.49%
=======================================
Files 3402 3402
Lines 65011 65011
Branches 10401 10401
=======================================
Hits 43230 43230
Misses 19212 19212
Partials 2569 2569
Flags with carried forward coverage won't be shown. Click here to find out more.
|
@@ -23,7 +23,7 @@ export const TableVisComponentGroup = memo( | |||
return ( | |||
<> | |||
{tableGroups.map(({ table, title }) => ( | |||
<EuiFlexItem key={title} className="visTable__group"> | |||
<EuiFlexItem key={title} className="visTable__group" grow={false}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we want to use flexGrow
instead of grow
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe we should use grow
, as it is the prop of OuiFlexItem
that sets the flex-grow
css property of div element within to specific value.
Signed-off-by: Sirazh Gabdullin <[email protected]>
…olumn view (#4638) * fix table vis bug Signed-off-by: Sirazh Gabdullin <[email protected]> * update CHANGELOG Signed-off-by: Sirazh Gabdullin <[email protected]> --------- Signed-off-by: Sirazh Gabdullin <[email protected]> Co-authored-by: Anan Zhuang <[email protected]> (cherry picked from commit 17683e1) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
…olumn view (#4638) (#4999) * fix table vis bug * update CHANGELOG --------- Signed-off-by: Sirazh Gabdullin <[email protected]> Co-authored-by: Anan Zhuang <[email protected]> (cherry picked from commit 17683e1) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Description
Fixes the visual bug where tables are rendered incorrectly as described in #4626
The cause of the issue was that this style
OpenSearch-Dashboards/src/plugins/vis_type_table/public/components/table_vis_app.scss
Lines 9 to 12 in 6bab7ef
Was not overriding the styles of
OuiFlexItem
, so theflex-grow
remained default as 1, instead of 0. The fix sets the grow property to 0 throughgrow
prop.Issues Resolved
#4626
Screenshot
Here how the tables look after the fix.
Testing the changes
Go to tables visualizations, split rows then split tables. Choose the column view. Check if the visual bug is fixed.
Check List
yarn test:jest
yarn test:jest_integration
yarn test:ftr