Is it possible to order inputs horizontally within ArrayImput and SimpleFormIterator? I know that the default is vertical. Thanks
See image of vertical inputs inside ArrayInputs here. Can the inputs be arranged horizontally? Thanks
Is it possible to order inputs horizontally within ArrayImput and SimpleFormIterator? I know that the default is vertical. Thanks
See image of vertical inputs inside ArrayInputs here. Can the inputs be arranged horizontally? Thanks
Yes you can, the ArrayInput is made using material-ui which comes with its style way. For instance, you can play with elements root, form etc...
const useIteratorStyle = makeStyles(() => ({
root: {
display: 'flex',
flexDirection: 'row',
},
form: {
width: '100%',
},
line: {
border: 0,
},
}));
const iteratorClasses = useIteratorStyle();
<ArrayInput {...props}>
<SimpleFormIterator classes={iteratorWithIndexClasses}>
...
</SimpleFormIterator>
</ArrayInput>
Gives me something like
You can override each property of the useStyles object defined in the SimpleFormIterator: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
Inline prop has been introduced in version 4.3. It should work like that
<ArrayInput {...props}>
<SimpleFormIterator inline>
...
</SimpleFormIterator>
</ArrayInput>