reactjsmaterial-uiadmin-on-rest
How can I make AutocompleteInput or SelectArrayInput scrollable?
I'm using the AutocompleteInput and SelectArrayInput from AOR framework and want to select from lots of items. Unfortunately, the menu doesn't fit properly on the screen.
How can I make the list scrollable?
Thanks in advance.
Solution
Based on Material UI documentation you can pass listStyle properties through options:
<ReferenceArrayInput label="Parts" source="partId" reference="parts" allowEmpty>
<AutocompleteInput optionText="name"
options={{ listStyle: { overflow: 'auto', maxHeight: 200}}} />
</ReferenceArrayInput>
Depending on your implementation you could also have the same behavior with SelectManyInput:
<ReferenceArrayInput label="Parts" source="partId" reference="parts" allowEmpty>
<SelectManyInput optionText="name"
options={{ listStyle: { overflow: 'auto', maxHeight: 200}}} />
</ReferenceArrayInput>
Material UI doc: http://www.material-ui.com/#/components/auto-complete Rest Admin doc: https://marmelab.com/admin-on-rest/Inputs.html#autocompleteinput
Something like that:
- Next.js Loads <script> tags but it doesn't execute them
- graphql codegen typescript suddenly brokes and don't want generate types
- NextJS 13 <button onClick={}> Event handlers cannot be passed to Client Component props
- Method in React component not rendering HTML
- importing an object within an object from an API
- Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcn/ui
- Why Nodemailer is working locally but not in Production?
- history.replace in react-router-dom v6
- How can I useEffect on screen width change?
- UseEffect doesn't get called in a child component
- Using ref in Typescript Nextjs
- What's the difference between setCount(prev => prev + 1) and setCount(count + 1)?
- How to get Android Version number in React-Native? (not API level number)
- React map using Objects.entries for rendering inputs dynamically and change values of individual fields
- ServiceWorker Update loop - Create react app
- Mantine Form TextInput won't maintain focus when input is wrapped in another component
- Displaying pure JSON format with black background in GraphQL Express React
- Canceling a react-query mutation
- Creating a Custom Button in React Typescript and add onClick Event
- Argument of type x is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWithoutRef<P>>'
- fetch data with sort not updating after build
- Can you destructure a result from an SWR query?
- Flask Api working Half the time- works flawlessly when sending post with python but not with javascript
- react-native-chart-kit Min and Max value
- Preserve Exit Animations with React Router v6 and Framer Motion
- How do I load a remote script (widget) inside a react component
- How to make series of images to slide uniformly and horizontally with using JavaScript to change transform transition
- TS2503: Cannot find namespace 'JSX'. - What is equivalent of `JSX.IntrinsicElements`?
- Any way to render HTML in react-markdown
- Problem with rendering markdown in NextJS/React