2 dimensional MUI Grid Layout with truncation

Question

I'm using Material UI v5 for layouting. I don't know how to truncate a string within a 2 dimensional Grid layout (within a Dialog).

I want to create a file upload component, with the following layout:

I can create a 1 dimensional Grid layout with truncation:

With the following code:

export function App() {
    return (
        <Dialog open={true} fullWidth maxWidth={"xs"}>
            <DialogContent>
                <Grid container columnSpacing={2}>
                    <Grid item xs zeroMinWidth>
                        <Typography noWrap>
                            long filename which needs to be truncated
                            long filename which needs to be truncated
                        </Typography>
                    </Grid>
                    <Grid item xs={"auto"}>
                        <Typography>100%</Typography>
                    </Grid>
                </Grid>
            </DialogContent>
        </Dialog>
    )
}

When I add another dimension for the LinearProgress indicator, I get an overflow:

That's how far I've come so far:

export function App() {
    return (
        <Dialog open={true} fullWidth maxWidth={"xs"}>
            <DialogContent>
                <Grid container direction={"column"}>
                    <Grid item>
                        <Grid container columnSpacing={2}>
                            <Grid item xs zeroMinWidth>
                                <Typography noWrap>
                                    long filename which needs to be truncated
                                    long filename which needs to be truncated
                                </Typography>
                            </Grid>
                            <Grid item xs={"auto"}>
                                <Typography>100%</Typography>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid item>
                        <LinearProgress/>
                    </Grid>
                </Grid>
            </DialogContent>
        </Dialog>
    )
}

I suppose that the overflow is exactly the length of the Typography component. How can I solve this problem?

why you are repeating `long filename which needs to be truncated ` in **Typography** — monim, Sep 14 '22 at 16:15
So the string is long enough. It's just an arbitrary sequence of chars. — julian.a, Sep 14 '22 at 18:07
So you just want **overflow** to be disabled no matter how much the string is tall ? — monim, Sep 14 '22 at 18:44
Can you not do `sx={{overflow: "hidden"}}` on wherever the overflow is coming from? — Anthony Ma, Sep 14 '22 at 21:52

monim · Answer 1 · 2022-09-15T17:33:06.363

You can make the overflow to be hidden and make your textOverflow ellipsis with changing Typography :

<Typography noWrap>
                                    long filename which needs to be truncated
                                    long filename which needs to be truncated
                                </Typography>

to :

<Typography
                  noWrap
                  sx={{ textOverflow: "ellipsis", overflow: "hidden" }}
                >
                  long filename which needs to be truncated long filename which
                  needs to be truncated
                </Typography>

But this can't be applied unless you provide the Grid a width property . like this : <Grid container columnSpacing={2} style={{ width: 200 }}> Your component should be like this :

import * as React from "react";
import Grid from "@mui/material/Grid";
import DialogContent from "@mui/material/DialogContent";
import Dialog from "@mui/material/Dialog";
import LinearProgress from "@mui/material/LinearProgress";
import Typography from "@mui/material/Typography";

function App() {
  return (
    <Dialog open={true} fullWidth maxWidth={"xs"}>
      <DialogContent>
        <Grid container direction={"column"}>
          <Grid item>
            <Grid container columnSpacing={2} style={{ width: 200 }}>
              <Grid item xs zeroMinWidth>
                <Typography
                  noWrap
                  sx={{ textOverflow: "ellipsis", overflow: "hidden" }}
                >
                  long filename which needs to be truncated long filename which
                  needs to be truncated
                </Typography>
              </Grid>
              <Grid item xs={"auto"}>
                <Typography>100%</Typography>
              </Grid>
            </Grid>
          </Grid>
          <Grid item>
            <LinearProgress />
          </Grid>
        </Grid>
      </DialogContent>
    </Dialog>
  );
}

export default App;

this is a demo in codesandbox

Thanks for your input. But I do need an ellipsis. See the three dots in my first screenshot example. — julian.a, Sep 15 '22 at 07:30
I updated the code now it should work with ellipsis text overflow! — monim, Sep 15 '22 at 17:34
Yes, but you assigned a width to the container and it's no longer flexible. That's not what I want. I did achive that with only properties built into mui and no sx properties. I do think that that container's width is the problem. — julian.a, Sep 15 '22 at 19:08
You cannot get an ellipsis text without setting a width as far as I know so you have one coice this one provided in my answer or have a text not ellipsis — monim, Sep 15 '22 at 20:28
https://stackoverflow.com/questions/58781860/css-grids-and-text-overflow-ellipsis That is how you do it in plain css grid. But I'm not able to handle it with MUI. — julian.a, Sep 16 '22 at 07:18

score 0 · Accepted Answer · answered Oct 11 '22 at 12:24

It did get fixed with GridV2 which currently (V5) is marked as unstable and will replace the old grid in V6.

import Grid2 from '@mui/material/Unstable_Grid2'

export function App() {
    return (
            <Dialog open fullWidth maxWidth={"xs"}>
                <DialogContent>
                    <Grid2 container direction={"column"} wrap={"nowrap"}>
                        <Grid2>
                            <Grid2 container columnSpacing={2}>
                                <Grid2 xs>
                                    <Typography noWrap>
                                        long filename which needs to be truncated
                                        long filename which needs to be truncated
                                    </Typography>
                                </Grid2>
                                <Grid2 xs={"auto"}>
                                    <Typography>100%</Typography>
                                </Grid2>
                            </Grid2>
                        </Grid2>
                        <Grid2>
                            <LinearProgress/>
                        </Grid2>
                    </Grid2>
                </DialogContent>
            </Dialog>
    );
}

2 dimensional MUI Grid Layout with truncation

2 Answers2