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.

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

Allow DataGrid height to be styled #2625

Closed
wants to merge 4 commits into from

Conversation

apedroferreira
Copy link
Member

@apedroferreira apedroferreira commented Sep 4, 2023

Attempt to fix the problems in #2613 about stretching the DataGrid.

This PR should make it so that it's more possible to try to set the DataGrid to full page height or style its height, such as by for example by setting sx: { height: "100vh" } (even though this kind of overrides the default behavior).

The label was also getting cut-off at the bottom when an element is set to take up the full page height like this, so this included moving the HUD selection hint inwards in those cases.

Table with sx: { height: "100vh" } before (the container height did not change with the grid, so the dotted border is shorter and does not match):
Screenshot 2023-09-04 at 22 06 58

Table with sx: { height: "100vh" } after:
Screenshot 2023-09-04 at 22 07 43

New label position (bottom and inwards):
Screenshot 2023-09-04 at 22 03 08

@apedroferreira apedroferreira added feature: Components Button, input, table, etc. enhancement This is not a bug, nor a new feature labels Sep 4, 2023
@apedroferreira apedroferreira self-assigned this Sep 4, 2023
@apedroferreira apedroferreira changed the title Allow DataGrid height to be styled, fix HUD position in full-page ele… Allow DataGrid height to be styled Sep 4, 2023
@Janpot
Copy link
Member

Janpot commented Sep 5, 2023

I'm hesitant to try to solve #2613 (reply in thread). I don't see yet how it could fit in the current layout paradigm. Using vh would not take into account any other vertical space taken up by other elements, or our header. Maybe something with flexbox, but I feel like it'd need a solution in our runtime. e.g. it'd need to turn off the resize handle, and probably set something up around minimum height and its container.

@apedroferreira
Copy link
Member Author

I'm hesitant to try to solve #2613 (reply in thread). I don't see yet how it could fit in the current layout paradigm. Using vh would not take into account any other vertical space taken up by other elements, or our header. Maybe something with flexbox, but I feel like it'd need a solution in our runtime. e.g. it'd need to turn off the resize handle, and probably set something up around minimum height and its container.

True, I just tried something quick to try to understand this issue and then saw that there could be some problems with the dotted border not matching + the selection hint getting cut-off, so added some fixes for those.
But this isn't too important and there's really no good way to have a full-height component I think... Will also wait to see if we can understand more about what this user was trying to do.

@apedroferreira apedroferreira marked this pull request as ready for review September 14, 2023 11:11
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 6, 2023
@apedroferreira
Copy link
Member Author

Actually this is all outdated by #2818, closing.

@apedroferreira apedroferreira deleted the fix-containers branch November 20, 2023 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement This is not a bug, nor a new feature feature: Components Button, input, table, etc. PR: out-of-date The pull request has merge conflicts and can't be merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants