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

[data grid] Column titles are getting strange overflow on tablets and cell phones #13404

Open
HugoPDF5 opened this issue Jun 5, 2024 · 2 comments · May be fixed by #16770
Open

[data grid] Column titles are getting strange overflow on tablets and cell phones #13404

HugoPDF5 opened this issue Jun 5, 2024 · 2 comments · May be fixed by #16770
Assignees
@KenanYusuf
Labels
component: data grid This is the name of the generic UI component, not the React module! customization: css Design CSS customizability design This is about UI or UX design, please involve a designer good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@HugoPDF5
Copy link

HugoPDF5 commented Jun 5, 2024 •
edited by github-actions bot
Loading

Steps to reproduce

Link to live example: (required): https://codesandbox.io/p/sandbox/upbeat-herschel-qlhhpw

After the new datagrid updates, the column titles have a strange width on mobile devices such as tablets and cell phones

Steps:

  1. After the codesandbox code is open, expand the right side of the view completely
  2. Open browser developer tools, enable responsive mode, select a mobile device (example: Galaxy tab S4)
  3. Check that the columns will have a type of "overflow" that impairs reading

Sem título

The behavior does not only occur in codesandbox, but in real applications, including the example on the page:
https://mui.com/x/react-data-grid/column-header/

Datagrid version: 7.6.1

Current behavior

Titles are partially hidden when transitioning from desktop -> mobile mode

Expected behavior

Column titles must be readable in desktop mode and on mobile devices

Context

No response

Your environment

npx @mui/envinfo 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: header datagrid

Search keywords:
@HugoPDF5 HugoPDF5 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 5, 2024
@zannager zannager transferred this issue from mui/material-ui Jun 6, 2024
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Jun 6, 2024
@zannager zannager changed the title [material-ui][HeaderDatagrid] Column titles are getting strange overflow on tablets and cell phones [data grid] Column titles are getting strange overflow on tablets and cell phones Jun 6, 2024
@michelengelen
Copy link
Member

Hey @HugoPDF5 ... this is expected behavior, since we need to keep some room available for the menu-button.

However I do agree that we could conditionally remove the sorting button from mobile devices, since they do not have any effect anyways (the sorting is done in the menu).

here is a diff to get it started:

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 0d5e88de5..f79f27a68 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -303,6 +303,12 @@ export const GridRootStyles = styled('div', {
       overflow: 'hidden',
       // to anchor the aggregation label
       position: 'relative',
+      '@media (hover: none)': {
+        [`& .${c.iconButtonContainer}`]: {
+          // on mobile devices remove the sorting icon to save space
+          display: 'none',
+        },
+      },
     },
     [`& .${c.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

@michelengelen michelengelen added good first issue Great for first contributions. Enable to learn the contribution process. customization: css Design CSS customizability and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 7, 2024
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Jun 7, 2024
@HugoPDF5
Copy link
Author

Hi @michelengelen, thanks for getting back to us. This is my first issue opening, so in this case the change you proposed will only be validated in the next MUI version update? If so, how can I apply this styling directly to my code to solve the problem faster?

@cherniavskii cherniavskii added the design This is about UI or UX design, please involve a designer label Jun 11, 2024
@KenanYusuf KenanYusuf moved this from 🆕 Needs refinement to 🔖 Ready in MUI X Data Grid Feb 25, 2025
This was referenced Feb 28, 2025
Draft
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@KenanYusuf KenanYusuf

Labels
component: data grid This is the name of the generic UI component, not the React module! customization: css Design CSS customizability design This is about UI or UX design, please involve a designer good first issue Great for first contributions. Enable to learn the contribution process.
Projects
MUI X Data Grid
Status: 🔖 Ready
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DataGrid] Fix column title truncation on touch devices KenanYusuf/mui-x
5 participants
@KenanYusuf @cherniavskii @michelengelen @HugoPDF5 @zannager