0
210
ViewsInterfaz de usuario de material: la selección está colapsada, el ancho automático no funciona
El elemento Material UI (React) Select está contraído y no se expande automáticamente en ancho a pesar autoWidth .
<FormControl margin="dense"> <InputLabel id="prefix-label">Prefix</InputLabel> <Select autoWidth labelId="prefix-label" id="prefix" disabled={formPrefix.disabled} value={formPrefix.value ?? ""} error={formPrefix.invalid} defaultValue={""} label="Prefix" onChange={handlePrefix} > <MenuItem value={""} disabled> Prefix </MenuItem> <MenuItem value={"US"}>US +1</MenuItem> <MenuItem value={"else"}>Else</MenuItem> </Select> <FormHelperText></FormHelperText> </FormControl>¿Estoy haciendo algo mal aquí?
·
Juan Pablo Isaza
2 answers
Answer question0
Debe agregar la propiedad de width a sx prop de FormLabel como:
<FormControl margin="dense" sx={{ width: 100 }}>Puede echar un vistazo a este sandbox para ver un ejemplo de trabajo en vivo.
·
Juan Pablo Isaza
Report
0
Agregue los accesorios fullWidth en el componente <FormControl> en lugar de en el componente <Select> .
Tu código JSX tiene que ser así
<FormControl margin="dense" fullWidth> <InputLabel id="prefix-label">Prefix</InputLabel> <Select // autoWidth // fullWidth labelId="prefix-label" id="prefix" // disabled={formPrefix.disabled} // value={formPrefix.value ?? ""} // error={formPrefix.invalid} defaultValue={""} label="Prefix" // onChange={handlePrefix} > <MenuItem value={""} disabled> Prefix </MenuItem> <MenuItem value={"US"}>US +1</MenuItem> <MenuItem value={"else"}>Else</MenuItem> </Select> <FormHelperText></FormHelperText> </FormControl>Edite este código en CodeSandbox
·
Juan Pablo Isaza
Report
Answer question