CODEWITHSUNDEEP
reactjsmaterial-uireact-tsx
user11425419
user11425419

Reputation:

How can i set the icon fixed on the right side of the box?

I use MaterialUi and ReactTSX. When i import the Chip and display it. It shows the deleteIcon on the right side of the label but i want it at the right side of the box. show problem

<Chip
            key={item}
            label={item}
            onDelete={() => this.handleDelete.bind(this)(item)}
            variant="outlined"
            style={{width: '70%', }}
          />

Upvotes: 1

Views: 4889

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81156

Normally the width of the Chip is determined by the length of the content within it and the delete icon's positioning is at the end because it is the last portion of the content of the Chip.

By setting the width to 70%, you are forcing the width to be bigger than the content in the case of the second Chip in the image in your question. In this case you can ensure that the delete icon is at the right edge using absolute positioning as shown below:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";

const StyledChip = withStyles({
  root: {
    width: "70%",
    position: "relative"
  },
  deleteIcon: {
    position: "absolute",
    right: 0
  }
})(Chip);

export default function Chips() {
  const handleDelete = () => {
    console.info("You clicked the delete icon.");
  };

  return (
    <StyledChip label="deletable" onDelete={handleDelete} variant="outlined" />
  );
}

Edit Fixed width chip delete icon position

Setting position: "relative" on the Chip root causes the absolute positioning of the delete icon to be based on the Chip as its containing element.

Upvotes: 1

Related Questions