[英]Label of Multiple Select is crossed out by the outline of the input field
I made a multiple select list with Material-UI.我用 Material-UI 做了一个多选列表。 But when I select an item the label should shrink and fit into the outline of the input field.
但是当我选择一个项目时,标签应该缩小并适合输入字段的轮廓。 The problem is the outline stays the same and the label shrinks behind it.
问题是轮廓保持不变,而标签在其后面缩小。
I tried looking for a solution in the Material-UI docs.我尝试在 Material-UI 文档中寻找解决方案。 It seems like there isn't any multiple select list outlined variant.
似乎没有任何多选列表概述的变体。 So I wonder if it is because there is no outlined variant of the multiple select list or that it is due to something else.
所以我想知道是因为没有多选列表的轮廓变体,还是由于其他原因。
<FormControl
variant="outlined"
fullWidth
>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="members"
error={this.props.touched.members && Boolean(this.props.errors.members)}
>
Members
</InputLabel>
<Select
onChange={this.change.bind(null, "members")}
multiple
value={this.state.members}
error={this.props.touched.members && Boolean(this.props.errors.members)}
input={
<OutlinedInput
labelWidth={0}
name="members"
id="members"
/>
}
>
<MenuItem value={'Baspa'}>Baspa</MenuItem>
<MenuItem value={'Plorky'}>Plorky</MenuItem>
<MenuItem value={'Rizzels'}>Rizzels</MenuItem>
</Select>
I also made a CodeSandBox: https://codesandbox.io/s/jnlx1vky39我还做了一个 CodeSandBox: https ://codesandbox.io/s/jnlx1vky39
This is how it looks like:这是它的样子:
You were missing a couple pieces that are shown in the documentation that allow the outline to know the label width:您错过了文档中显示的几部分,这些部分允许轮廓知道标签宽度:
componentDidMount() {
this.setState({
labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth
});
}
...
<OutlinedInput labelWidth={this.state.labelWidth} name="members" id="members" />
Here's the full code:这是完整的代码:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.