0
257
Views¿Cómo puedo hacer que el componente React select se configure automáticamente para adaptarse al ancho de la etiqueta?
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:
- Cuando no se hace clic:
- Cuando se hace clic:
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?
·
Juan Pablo Isaza
2 answers
Answer question0
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;
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question