2 dimensional MUI Grid Layout with truncation

julian.a 0
Viewed 45

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:

enter image description here

I can create a 1 dimensional Grid layout with truncation:

enter image description here

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:

enter image description here

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?

mui5 flexbox material-ui reactjs typescript
1 Answers

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

monim0
Related