我正在尝试使用 MaterialUI Grid 组件和字段构建以下表单布局:
+-----------------------------------------+
|Form |
| |
| +--------------+ +----------------+ |
| |Field_1 | |Field_2 | |
| +--------------+ +----------------+ |
| +--------------+ +---------+ +--------+ |
| |TextArea | |Popup_A1 | |Popup_A2| |
| | | +---------+ +--------+ |
| | | +---------+ +--------+ |
| | | |Popup_B1 | |Popup_B2| |
| | | +---------+ +--------+ |
| | | +---------+ +--------+ |
| | | |Popup_C1 | |Popup_C2| |
| | | +---------+ +--------+ |
| | | |
| +--------------+ |
+-----------------------------------------+
我的理解可能有点奇怪,弹出窗口显示为最小的正方形。页面结构如下(简化):
<Form>
<Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
<Grid container xs="12" spacing="1">
<Grid item xs={12} sm={6}>
<Field name="Field1" ... fullWidth />
</Grid>
<Grid item xs={12} sm={6}>
<Field name="Field2" ... fullWidth />
</Grid>
</Grid>
<Grid container xs={12} >
<Grid container xs={4} sm={4} >
<Field fullWidth multiline component={TextField} />
</Grid>
<Grid container xs={8} sm={8}>
<Grid container >
<Grid item>
<TextField name="Popup_A1" fullWidth select>
<MenuItem key="1" value="1">
Large Text
</MenuItem>
<MenuItem key="2" value="2">
Ooh Some Large Text
</MenuItem>
<MenuItem key="3" value="3">
Another Large Text Choice
</MenuItem>
<MenuItem key="4" value="4">
No, LOOOONG Text
</MenuItem>
</TextField>
</Grid>
<Grid item>
<TextField name="Popup_A2" fullWidth select>
<MenuItem key="1" value="1">
Large Text
</MenuItem>
<MenuItem key="2" value="2">
Ooh Some Large Text
</MenuItem>
<MenuItem key="3" value="3">
Another Large Text Choice
</MenuItem>
<MenuItem key="4" value="4">
No, LOOOONG Text
</MenuItem>
</TextField>
</Grid>
</Grid>
</Grid>
<Grid container xs={8} sm={8}>
<Grid container >
<Grid item>
<Field name="Popup_B1" ... fullWidth select >....</Field>
</Grid>
<Grid item>
<Field name="Popup_B2" ... fullWidth select >....</Field>
</Grid>
</Grid>
</Grid>
...
</Grid>
</Grid>
</Form>
有人可以让我摆脱痛苦,让我知道我做错了什么,或者可能为我指出构建这样的表单的资源吗?
Edit
我已经添加在MenuItem
Venkovsky 的代码沙箱非常有用的元素......它准确地说明了我的意思。弹出窗口非常非常狭窄。 :-(
以防万一其他人遇到类似的问题,这里是有效代码的基础知识。我认为问题在于将字段包装在<Grid item sm={6}>
's:
<Form>
<Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
<Grid container spacing={1}>
<Grid item sm={6}>
<Field name="requestor" ... />
</Grid>
<Grid item sm={6}>
<Field name="status" .../>
</Grid>
</Grid>
<Grid container >
<Grid item sm={3}>
<Field name="materials" type="text" label="Materials" variant="outlined" rowsMax={10} rows={20} margin="normal" fullWidth multiline ... />
</Grid>
<Grid item sm={1}>
</Grid>
<Grid item sm={8}>
<Grid container spacing={1}>
<Grid item sm={6}>
<TextField name="reviewer_2" ... />
</Grid>
<Grid item sm={6}>
<TextField name="approver_1" ... />
</Grid>
</Grid>
<Grid container spacing={1}>
<Grid item sm={6}>
<TextField name="reviewer_2" ... />
</Grid>
<Grid item sm={6}>
<TextField name="approver_2" ... />
</Grid>
</Grid>
<Grid container spacing={1}>
<Grid item sm={6}>
<TextField name="reviewer_3" ... />
</Grid>
<Grid item sm={6}>
<TextField name="approver_3" ... />
</Grid>
</Grid>
</Grid>
</Grid>
<Button type="submit" > Submit </Button>
</Grid>
</Form>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)