Material-UI: How to specify maxWidth of Chip?

1
votes

My chips might contain very long strings, so I would like to limit the width of the chip, and show the full text in a Tooltip.

However when I try to change the maxWidth, it only ends up changing the width of the grey, pill-shaped part of the Chip -- the label continues to overflow, and the "delete" button also gets out of place and appears outside the chip.

Normal: enter image description here

After applying maxWidth: enter image description here

I have tried using inline style={{}} prop, as well as trying the "withStyles" approach to create my own custom styled Chip, but both have the same effect.

I modified the Chip example from Material-UI docs to demonstrate the issue: https://codesandbox.io/s/material-demo-zt72h

Edit: If I also adjust the 'overflow' styling, it's almost there, but all I see is a truncated section from the middle of the string, no ellipsis, and the delete button has disappeared:

enter image description here

  chip: {
    maxWidth: 100,
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }
3
reactjsmaterial-ui

3 Answers

2
votes

You need to provide your custom implementation to label prop (that's just an example, you might need to modify it to better suit your case):

const CHIP_MAX_WIDTH =  100;
const CHIP_ICON_WIDTH = 30;

const EllipsisText = (props) => {
  const { children } = props

  return (
    <div style={{
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      maxWidth: CHIP_MAX_WIDTH - CHIP_ICON_WIDTH
      }}>
      {children}
    </div>
  )
}

And than use it in Chip:

<Chip
   size="small"
   key={data.key}
   icon={icon}
   label={<EllipsisText>{data.label}</EllipsisText>}
   onDelete={data.label === "React" ? undefined : handleDelete(data)}
   className={classes.chip}
/>

Edit Invisible Backdrop

0
votes

You can give styling to it, as

style={{width: '15%', height:'10%',marginLeft: '1%', fontSize: '1.3rem'}}
-1
votes

I would use the css for this kind of issue, since the problem is long text in chip.

like: it will still require some polishing though

label: {
    maxWidth: "100%",
    overflow: "hidden"
  }

in chip component

<Chip
  ...
    classes={{ label: classes.label }}
  ...
/>