I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its container's width.
The issue I'm facing is that material-ui's styles are affecting the Select component, making it difficult to apply custom styles such as adding ellipsis text overflow.
While researching, I found that material-UI supports the `noWrap` property and `textOverflow: "ellipsis"`, but I'm struggling to find the right combination for my specific case.
The desired outcome is to display an ellipsis if the text surpasses its parent container size. For example, instead of showing the full text like "Contribution...", I would like it to be truncated to "Contrib...". However, the Material-UI Select component SVG icon overlays the text.
Despite trying various options and methods, I haven't been able to achieve the expected result. I've experimented with changing colors to check if the styles are affecting the component, which they are.
<Grid item sm={2} lg={2} style={{display: 'flex', alignItems:'center'}}>
<Select native style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" }}
value={this.state.status}
onChange={this.handleChange.bind(this, Filter.Status)}>
{Object.keys(StatusFilter).filter(key => !isNaN(Number(StatusFilter[key])).map(item => {
return (<option key={item} value={StatusFilter[item]}>{this.getStatus(StatusFilter[item])}</option>);
})}
</Select>
</Grid>