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

[DataGridPro] Autosize Columns - Headers being cut off #10666

Merged
merged 3 commits into from
Nov 7, 2023
Merged

[DataGridPro] Autosize Columns - Headers being cut off #10666

merged 3 commits into from
Nov 7, 2023

Conversation

gitstart
Copy link
Contributor

Description

  • Update the Autosize computation for columns, by including menu container width & and icon container width to the computed width.

Screenshot

image

closes #10570


This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.

@mui-bot
Copy link

mui-bot commented Oct 13, 2023

Deploy preview: https://deploy-preview-10666--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 59f4c18

@romgrk romgrk changed the title MUIX-10570 - [datagrid] Autosize Columns - Headers being cut off [DataGridPro] Autosize Columns - Headers being cut off Oct 13, 2023
Comment on lines +233 to +244
const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
const element = title ?? content;

const style = window.getComputedStyle(header, null);
const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
const contentWidth = element.scrollWidth + 1;
const width = paddingWidth + contentWidth;
const width =
contentWidth +
paddingWidth +
(iconContainer?.clientWidth ?? 0) +
(menuContainer?.clientWidth ?? 0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we'll have to differentiate the logic for desktop & mobile. We only keep the icons visible at all times on mobile, and we don't want to pay the width cost on desktop.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@romgrk Apologies for the delay in resolving this.

The logic actually takes that into account already. Here is a loom video to confirm

@gitstart gitstart marked this pull request as ready for review October 17, 2023 20:01
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Oct 18, 2023
@gitstart gitstart requested a review from romgrk November 2, 2023 11:52
@michelengelen michelengelen changed the base branch from master to next November 6, 2023 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[datagrid] Autosize Columns - Headers being cut off
4 participants