He definido un componente de selección React de la siguiente manera:
<FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" label="Age" > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl>
Esto se traduce de la siguiente manera:
Tenga en cuenta que cuando no se hace clic en ella, la etiqueta Edad no se muestra por completo.
Sé que puedo mostrar completamente la etiqueta "Edad" configurando sx={{minWidth: 80}}
en FormControl
. Pero eso no es "Automático". ¿Qué pasa si mi etiqueta cambia dinámicamente? De alguna manera quiero que el componente de selección ajuste el ancho para mostrar la etiqueta por completo. ¿Es posible?
import React from 'react'; import Select, { components } from 'react-select'; import makeAnimated from 'react-select/lib/animated'; import 'bootstrap/dist/css/bootstrap.css'; const colourOptions = [] //our array of colours class App extends React.Component { render(){ return ( <Select className="mt-4 col-md-6 col-offset-4" components={makeAnimated()} isMulti options={colourOptions} /> ); } } export default App;
Creo que puede agregar fullWidth en FormControl, eso puede resolver su problema, el componente de selección se mostrará bien.
Puedes probar mi código como a continuación:
<FormControl fullWidth>