0

I have here a problem that the cardTitle shouldn't overlap the Card when the texts is too long. Right now what I'm doing is setting a static maxWidth which I don't like. I want it to adjust based on the Card. Is that possible?

CLICK HERE

<Stack
  sx={{
    maxWidth: "330px"
  }}
>
  <Tooltip
    title={<Typography variant="body1">{cardTitle}</Typography>}
  >
    <Typography
      variant="h3"
      sx={{
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        width: "100%"
      }}
    >
      {cardTitle}
    </Typography>
  </Tooltip>
</Stack>
Joseph
  • 7,042
  • 23
  • 83
  • 181
  • Currently, I could not see `maxWidth` or `max-width` in your sandbox. What is your desired output? – Ahmet Emre Kilinc Sep 28 '22 at 09:19
  • @AhmetEmreKilinc. Its there `maxWidth: "330px"`. No need to declare maxWidth, needs to adjust it to its parent container, so it will be flexible – Joseph Sep 28 '22 at 09:33

1 Answers1

0

You need to add overflow: "hidden" to the sx prop of your Stack and its child div's that define the flex-box. Simply, after removing the maxWidth:

sx={{
  maxWidth: "330px"
}}

You need to replace the following part:

<Stack
  gap={2}
  sx={{
    p: 2,
    flexDirection: "row",
    "& > div": {
      "&:first-of-type": {
        flex: "1 1 35%"
      },
      "&:last-of-type": {
        flex: "1 1 65%"
      }
    }
  }}
>

with this code:

<Stack
  gap={2}
  sx={{
    p: 2,
    flexDirection: "row",
    overflow: "hidden",
    "& > div": {
      "&:first-of-type": {
        flex: "1 1 35%",
        overflow: "hidden"
      },
      "&:last-of-type": {
        flex: "1 1 65%",
        overflow: "hidden"
      }
    }
  }}
>

You can take a look at this sandbox for a live working example.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
  • Thank you. can you explain why we need to add both overflow both on the parent and child divs? – Joseph Sep 28 '22 at 11:41
  • I think it is to modify the default behavior of flex-box. We need to add `overflow:hidden` to all parents of an element `white-space: "nowrap"` whose display value is flex. I'm not an expert on flex-box, but I think this [stackoverflow answer](https://stackoverflow.com/a/36247448/7399478) can provide more information. Actually, we don't need to add `overflow:hidden` for the first child div. Only parent and last-child can also work. – Ahmet Emre Kilinc Sep 28 '22 at 11:51
  • Hi Ahmet. Could you help me on this? https://stackoverflow.com/questions/75148402/remove-filters-in-material-ui-data-grid-in-react. Thanks – Joseph Jan 19 '23 at 14:20