giokokos giokokos - 29 days ago 6
React JSX Question

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.

Answer Source

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:

enter image description here