I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the text. Here is my list
const allTags = (
<Popover
style={{ width: "auto" }}
id="popover-basic"
title={
<h6
style={{
textAlign: "center",
fontFamily: "verdana",
color: "#8f9091",
fontStyle: "bold",
margin: "8px"
}}
>
Create a Label
</h6>
}
>
<div>
{this.state.allTagsList.map((tag, i) => {
return (
<div>
<div style={{ display: "inline" }}>
<Button
className="btn btn-lg btn-fill"
style={{
width: "210px",
maxWidth: "300px",
border: "none",
backgroundColor: tag.color,
fontStyle: "bold",
cursor: "pointer",
padding: "10px",
marginBottom: "3px",
paddingRight: "80px",
overflow: "hidden",
textOverflow: "ellipsis",
textAlign: "left"
}}
onClick={e => {
console.log("dd");
}}
>
<span>{tag.text}</span>
<span className="fas fa-check" />
</Button>
</div>
<div style={{ display: "inline" }}>
<Button
className="btn btn-circle-micro"
style={{
borderRadius: "30px",
border: "none",
width: "25px",
height: "25px",
textAlign: "center",
padding: "1px 0",
marginRight: "2px",
marginTop: "8px"
}}
>
<i
className="fas fa-pen"
style={{ pointerEvents: "none", transform: "scale(1,1)" }}
/>
</Button>
</div>
</div>
);
})}
</div>
</Popover>
);