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.

Sign up for GitHub

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

Jump to bottom

DataGrid height doesn't update when rowCount does #5030

Closed
machadoum opened this issue Aug 16, 2021 · 5 comments · Fixed by elastic/kibana#114718
Closed

DataGrid height doesn't update when rowCount does #5030

machadoum opened this issue Aug 16, 2021 · 5 comments · Fixed by elastic/kibana#114718
Assignees
@chandlerprall
Labels
bug data grid

Comments

@machadoum
Copy link
Member

I am having issues with DataGrid and vertical scroll. Ideally, I would like my grid never to scroll vertically. Instead, it should expand to the full height based on its content. And I am not using data grid pagination.

When I change rowCount dynamically, the height doesn't get re-calculated.

Screenshot 2021-08-13 at 18 14 49

I was able to isolate the issue on codesandbox

There is a second bug related to calculated height present in this sandbox that might be related. The computed height is too small when the grid has a horizontal scroll.
Screenshot 2021-08-16 at 10 28 26
@machadoum machadoum changed the title DataGrid height doesn't update when number of item does DataGrid height doesn't update when number of items does Aug 16, 2021
@machadoum machadoum changed the title DataGrid height doesn't update when number of items does DataGrid height doesn't update when rowCount does Aug 16, 2021
@machadoum machadoum mentioned this issue Aug 16, 2021
Closed
4 tasks
@elizabetdev
Copy link
Contributor

There is a second bug related to calculated height present in this sandbox that might be related. The computed height is too small when the grid has a horizontal scroll.

Just mentioning that this issue is very similar to this one: #4163. But in this case, the data grid is not taking into account the horizontal scrollbar when calculating the height.

@machadoum
Copy link
Member Author

I was investigating it and looks like there are 2 different problems. The data grid is not taking into account the horizontal scrollbar when calculating the height and also data grid not recalculating its height when rowCount changes.

@GFIGroup GFIGroup mentioned this issue Aug 24, 2021
Closed
machadoum added a commit to machadoum/kibana that referenced this issue Aug 24, 2021
@machadoum
Add DataGrid height hack to t-grid
98d4125 
HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.
@machadoum
Copy link
Member Author

As a workaround, I added the DataGrid pagination property. It fixed one issue for me, now it does recalculate the height when pageSize changes. But the other issue is still happening.

The computed height is too small when the grid has a horizontal scroll.

semd added a commit to elastic/kibana that referenced this issue Aug 26, 2021
@machadoum @semd
[RAC] EuiDataGrid pagination (#109269)
3854d3a 
* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Aug 26, 2021
@machadoum @semd @kibanamachine
[RAC] EuiDataGrid pagination (elastic#109269)
26ff990 
* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>
kibanamachine added a commit to elastic/kibana that referenced this issue Aug 26, 2021
@kibanamachine @machadoum @semd
[RAC] EuiDataGrid pagination (#109269) (#110316)
76e92d8 
* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>

Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co>
Co-authored-by: semd <sergi.massaneda@elastic.co>
semd pushed a commit to semd/kibana that referenced this issue Aug 30, 2021
@machadoum @semd
[RAC] EuiDataGrid pagination (elastic#109269)
8b4b617 
* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>
# Conflicts:
#	x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
semd added a commit to semd/kibana that referenced this issue Aug 30, 2021
@machadoum @semd
[RAC] EuiDataGrid pagination (elastic#109269)
099b6af 
* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>
semd added a commit to elastic/kibana that referenced this issue Aug 30, 2021
@semd @machadoum
[RAC] EuiDataGrid pagination (#109269) (#110471)
027f48a 
* Update T-Grid to use DataGrid pagination

* It also improves the Gtid loading state
* DataGrid pagination makes sure that we display the grid with the proper height.

* Add DataGrid height hack to t-grid

HUGE HACK!!!

DataGrtid height isn't properly calculated when the grid has horizontal scroll.
elastic/eui#5030

In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.

Please revert this commit  and allow DataGrid to calculate its height when the bug is fixed.

* Apply DataGrid laoding and pagination changes to observability

* Fix cypress tests

* Fix t-grid page render bug on Observability

* some pagination fixes

* hide table when analyzer active

* isolate exported function

Co-authored-by: semd <sergi.massaneda@elastic.co>

Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co>
@machadoum machadoum mentioned this issue Sep 8, 2021
Merged
@michaelolo24 michaelolo24 mentioned this issue Oct 12, 2021
Merged
@cchaos cchaos reopened this Oct 19, 2021
@cchaos
Copy link
Contributor

cchaos commented Oct 19, 2021

I don't think this is fixed. The Security solution's "hack" is very pixel based which won't work long-term as we continue to build user-controlled layout options.

@chandlerprall chandlerprall self-assigned this Oct 21, 2021
@chandlerprall chandlerprall mentioned this issue Oct 21, 2021
Merged
5 tasks
@cee-chen
Copy link
Contributor

cee-chen commented Jan 24, 2022 •
edited
Loading

This should have been resolved by #5313 and #5400

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chandlerprall chandlerprall

Labels
bug data grid
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Security Solution] Fix height issue michaelolo24/kibana
5 participants
@chandlerprall @cee-chen @cchaos @machadoum @elizabetdev